HTML・CSSテックラボ

ie6.0のマージンが2倍になるバグ

ie6.0はfloatが指定されている場合、margin指定があるとその数値を2倍にするという有名なバグがあります。

.hoge{
float: left;
magin-left: 10px;
}

実際のCLASS名hogeのマージンは20ピクセルに設定されてしまいます。
一番簡単な対処法はマージンの代わりにpaddingを使うことです。

.hoge{
float: left;
padding-left: 10px;
}

paddingの設定もしていて、なるべく指定は変えたくない場合、display属性にinlineを指定するとバグを回避できます。

.hoge{
float: left;
display: inline;
magin-left: 10px;
}

ブロック要素をインライン要素に変えるので、なんとなく気持ち悪いですが、実用的です。

関連記事