IE6でfloatを指定した要素の左右marginが大きくなる（倍になる）

写真をfloatさせてテキストを廻りこませたら、IE6だけ写真の位置が違う！なんて経験ないでしょうか。

これは特定の条件が揃った際に起こるIE6のバグなのですが…はてさてその発生条件とは。

発生条件

このバグはスタイルシートで次のような指定がされているときに発生します。

このように float する方向に対し margin が指定されているとその値が倍になってしまいます。
もちろん float: right でも同様です。
サンプルを用意しましたのでIE6で確認してみてください。
◆バグサンプル

対処法

このバグの対処法ですが、次のようなやり方があります。

• CSSハックを使いIE6だけ、margin値を通常の半分の値を指定する
• CSSハックを使いIE6だけ、floatを指定した要素にdisplay: inlineを指定する

オススメは2つ目の方法です。1つ目の方法では、値が奇数だった場合に1pxの差が生じてしまいます。
2つ目の方法はinline指定しまうと要素の領域が広がらないと思いますが、IE6はinline指定がされていてもblock要素のように領域が広がるため、問題ありません。

———-

CSSでレイアウトを組むさいにこのバグは致命的とも言えますので対処法を必ず抑えておきたいですね。