CSS Radar

IE ダブルマージンフロートバグをFix

Internet Explorer 5、5.5、6にもっとも不可解とも言えるバグがある。
それが、ダブルマージンフロートバグ。

floatした要素に対して、同じ方向にmarginを与えると、marginが2倍になってしまう。
というバグ。

図解すると上記の様になる。

.content {
    float: left;
    margin-left: 30px;
}

というようにすると、IE5〜6では

.content {
    float: left;
    margin-left: 60px;
}

というように解釈される、ということだ。

見落としがちなのは、margin: 10px 0 0 30px；というように省略式で書いた場合。
もちろん、この場合もmargin-left部分の値は倍になってしまう。

修正は意外と簡単。

.content {
    float: left;
    margin-left: 30px;
}

この例の場合なら、

.content {
    float: left;
    margin-left: 30px;
    display: inline;
}

というように、display: inline;を追加すれば解決する。