IE6でfloatしたボックス要素のmarginが2倍になるバグの対処法

2010年11月12日

IE6のバグの一つとして、floatしたのと同じ方向にmarginを指定すると、その値が2倍になってしまうという物があります。例として、

1.sampleBox {
2    float: left;
3    margin-left: 10px;
4}

この場合だと、margin-leftが2倍に換算され、20pxになってしまいます。そこで、このバグへの対処法を何点かご紹介し、それを使うデメリットについてもご説明します。

新たにボックス要素で囲む

floatするボックスの外、あるいは中に新しくボックス要素を作る方法です。例えば、

HTML

`1`	`<div class="sampleBoxLeft"><p>テキストです。</p></div>`

`2`	`<div class="sampleBoxRight"><p>テキストです。</p></div>`

CSS

1.sampleBoxLeft {
2    float: left;
3    margin-left: 10px;
4}
5.sampleBoxRight {
6    float:left;
7}

このようなソースがあった場合、

HTML

1<div class="sampleBoxLeftOuter">
2    <div class="sampleBoxLeft"><p>テキストです。</p></div>
3</div>
4<div class="sampleBoxRight"><p>テキストです。</p></div>

CSS

1.sampleBoxLeftOuter {
2    margin-left: 10px;
3}
4.sampleBoxLeft {
5    float: left;
6}
7.sampleBoxRight {
8    float: right;
9}

このようにすることで、marginを2倍にさせることなく、floatと同じ方向に間隔をとることが出来ます。floatとmarginを同じ要素内で指定しなければよいので、新たに親要素、あるいは子要素を作るのが一つの手です。

デメリットとしては、新たにクラスを作り直さなければいけないこと、HTMLを書き直さなければならないということが挙げられます。

paddingを使う

marginの代わりにpaddingを使う方法です。

1.sampleBoxLeft {
2    float: left;
3    padding-left: 10px;
4}
5.sampleBoxRight {
6    float:left;
7}

デメリットとしては、背景要素を指定していたり、borderなどを指定していると、デザインが崩れる可能性があるという点です。

CCSハックを使う

IE6だけに適用されるCSSハックを使うのも一つの手です。

01.sampleBoxLeft {
02    float: left;
03    padding-left: 10px;
04}
05    * html .sampleBoxLeft {
06        padding-left: 10px;
07    }
08 
09.sampleBoxRight {
10    float:left;
11}

デメリットとしては、ソースがやや見づらくなってしまう点です。また、ハックというものはなるべく使わないほうがよいものなので、できればハックを使わずに問題が解決できる方法を探すべきでしょう。

ここまで何点かご紹介してきましたが、最後にデメリットのない、floatバグ対策の決定版と呼べるものをご紹介しましょう。

display: inlineを使う

1.sampleBox {
2    float: left;
3    margin-left: 10px;
4    display: inline;
5}

たったこれだけです。floatと同じ要素内にdisplay:inlineを加えることで、marginが2倍になるバグを回避することができます。

IE6のfloatバグは、CSS初心者が陥りやすい状況の一つですが、原因と対処法さえ覚えればバグを起こさずにコーディングすることは簡単です。floatするのと同じ方向のmarginは同要素の中で指定しない、ということをまず覚えておきましょう。