スタイルシート/Q&A/ブラウザごとに表示が違う時は？ - design-memo

トップ > スタイルシート > Q&A > ブラウザごとに表示が違う時は？

Q&A-ブラウザごとに表示が違う時は？

全ての余白をリセットしてみる。

*{padding:0;margin:0;}

「*」で全ての要素に対して、余白、マージンを0にリセットする方法。「padding:0;margin:0;」
ブラウザごとに違うデフォルトの余白をリセットするのに使います。

ただ、上記の方法だと、余白があった方が便利な要素の余白まで消えてしまいます。

それが気になる場合は、

body,[[html]],ul,ol{padding:0;margin:0;}

のように要素ごとに設定します。

paddingとmarginを同時に指定しないようにする。

よく言われるもので、１つの要素にpaddingとmarginを同時に指定した場合

• 「要素の内側に余白がつく解釈のブラウザ」･･･firefoxなど
• 「余白分要素が大きくなってしまう解釈のブラウザ」･･･IE6,IE7など

があります。

paddingとmarginを同時に指定しないようにするのが簡単な回避方法。

どうしても同時に指定したい場合は、IE系のみに動作するようなcssハック[作成]を使うことでも表示の違いを避けられます。