ダブルマージンバグ

• 文字サイズを縮小
• 文字サイズを拡大
• 元の文字サイズに戻す

1. スタッフブログ
2. 業界ブログ
3. 業界ポッド？

XHTML+CSSでコーディングをしていると、約1/3くらいはIEとそのほかのブラウザの表示差異を吸収する作業に追われます。
特にIE6がかなりのへそ曲がりなので、いつも泣かされてます。

IE6のかなーり有名なバグに、ダブルマージンバグがあります。
これは、floatしているボックス要素にfloatしている方向のマージンをあてると、そのマージンが2倍になってしまうというものです。

// CSSソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

div.box {
    float: left;
    margin-left: 20px;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<div>タグに“box”というクラスで、“左”にfloatしているボックス要素に“左”marginをあてています。
<div>タグの左側のmarginは本来20pxであるものが、IE6だと2倍の40pxになります。

これを知らないと、左の余白がデザイン指定よりもふくらんだり、
他のfloatしているボックス要素がカラム落ちしてしまったりと、踏んだり蹴ったりです。

IE6用にCSSを分けるとか、CSSハックを使って対処するのも可能ですが、できるだけスマートに解決したいところです。
そんなわけで、以下の一文を追加します。


// CSSソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

div.box {
    display: inline; /* double margin bug fix */
    float: left;
    margin-left: 20px;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

元のCSSに "display: inline;" が追加されました。(/*～*/は目印でつけています。本来は必要ありません。)
「え？！ボックス要素をインライン要素に変えて大丈夫なの？」と思ってしまいますが、
ブラウザはfloatしている要素はブロック要素として扱うようです。
こうすることで、なぜか2倍にふくらんだマージンが元に戻ります。

.....やれやれだね。