IE6とFireFoxで知っておくべきmarginに関するCSSハック

2006年8月18日

今回はコーディングでよく悩まされるIE6とFirefoxでのmarginに関するCSSハックをご紹介します。

たとえば何かのブロック要素をfloatで右か左どちらかに寄せてしまうと、marginのautoが効かなくなります。
その場合は、普通にpxで幅のmarginを合わせることになります。
しかし、IE6とFireFox(FireFoxでなくてもW3C推奨ブラウザ)ではmarginの解釈が異ます。

例えば、左右に10pxをとるとすると、IE6では左右に20ｐｘづつmarginをとったように表示され、レイアウト崩れが生じてしまいます。

これはIE6がCSSに完全に対応していないために起こる現象なので、けっして自分の失敗ではないということを知っておかなければなりません。

対処方法として、IE6だけに効果を表す代表的なCSSハック”　*html body　をプロパティの前につけて、左右のmarginの数値を半分の5ｐｘに設定します。
これで、IE6、FireFoxともにレイアウト崩れを起こさずにきっちり表示されるでしょう。

IE7がブラウザのシェアをとるまでの当分の間は、こういったCSSハックを行うことがWEBデザイナーは必須となるでしょうね。

*html body div#main {
width:500px;
float:right;
margin:10px 5px;
}
div#main {
width:500px;
float:right;
margin:10px 10px;
}

※追記：ちなみにdisplay:inline;とすることで簡単に回避できます。