2

私はウェブサイトsimkt.comで作業しており、ベーステーマを再構築して目的の外観に一致させた後、joomla2.5に移行しました。

残念ながら、私は初心者のWeb開発者であるため、Chrome以外のブラウザーでどのように表示されるかを確認するのを忘れていました。サイトは現在公開されており、Firefox / IEでウェブサイトが正しくないことをすぐに発見しました。いくつかの調整を行った後、問題を修正するために調整を行うと、間隔に約5ピクセルの違いがあることがわかりました。 ChromeとFirefox/IE（そして、私は今IE 7でテストしましたが、かなりひどいものでした）。

だから、私の質問は、私が間違っていることは何ですか、そしてこれを修正するにはどうすればよいですか？

Chrome devを使用して、rt-body-bgのトップパディングを0に減らし、ロゴ自体で、トップマージンを-30に、ボトムマージンを-25に減らしました。これは、私が望むものに近いように見えますが、 Firefoxのロゴとメニューの間に5ピクセルのギャップがあり、IEではログインボタンが奇妙な方向に動き始めます。

私はいくつかのcss/php / htmlを知っていますが、私はまだ学んでいます、どんな助けでも大歓迎です！

ありがとう！

4

2 に答える 2

2

ブラウザが異なれば、要素ごとに css のデフォルト値も異なることに注意してください。CSS を使用してデザインをプログラミングする際の良い方法は、css ファイルの先頭でリセット値を使用することです。このリセットにより、未設定の値がすべてのブラウザで同じになるようになります。

CSSリセットコードについては、このリンクを参照してください

http://meyerweb.com/eric/tools/css/reset/

それが役に立てば幸い

于 2013-02-06T16:19:27.660 に答える
0

@Stoyan が言ったように、CSS ファイルの先頭で CSS リセットを使用する必要があります。

あなたは特にマージンについて言及しています。私たちのサイトで margin-top がアイテムの配置に使用されていたという問題を解決する必要がありました (良い考えではありません - 以前の開発者のせいです)。IE と Chrome では問題ありませんでしたが、FireFox では上余白が異なるため、見栄えが悪くなります (項目が 30px 低すぎました)。

サイト全体に影響を与える可能性があるため、CSS 全体のリセットは使用したくなかった (たとえば、フォントがすべて変更された)。

不思議なことに、margin-top ではなく line-height を使用して解決しました。

body {
    line-height: 1;
}
于 2016-02-29T12:41:54.047 に答える