IE6で、floatした要素にmarginを指定すると値が2倍になる

|

「IE6以前のブラウザにおいて、floatしたブロック要素にマージン(margin)を指定すると値が2倍になってしまう」というのは非常に有名なIE6のバグなのですが、最近floatを解除するのに、親要素にfloatを指定して回り込みを解除することをよくしているので、このバグによく遭遇します。このバグの解決方法を紹介します。

(X)HTMLコード

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

CSSコード

li {
   display:inline;
   float:left;
}

display:inline;にすると、他のブラウザで不都合は起こらないのか?という疑問が起こるわけですが、仕様どおりの動作をするブラウザでは起こりません。

というのも、「floatを指定した要素にdisplayプロパティは無視される」と仕様書に書いてあります。

float:left・・・左に浮動するブロックボックスを生成する。 続く内容は、('clear'プロパティの指定に従いつつ)そのボックスの右側に上から流し込まれる。 このプロパティが'none'以外の値を取る場合、その要素の'display'プロパティは無視される。

視覚整形モデルより引用

また、リストを横並びにして、余白をマージンで空ける場合があります。その際、最後の余白は不必要な場合、親要素にマイナスのマージン(ネガティブマージン)を指定することで、各要素の間だけに余白を空けることが出来ます。しかし、IE6ではネガティブマージンが効かない場合があります。

IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。

CSSコード

ul {
   zoom:1;
}
これはhasLayoutプロパティの値をtrueにするためです。hasLayoutに関しては、以下のサイトなどを参考にしてください。

最近のブログ記事