IE6 ダブルマージンフロートバグ

先日、わが社の天才コーダーがお客様のサイトを確認していると、
「pタグ」で囲われていない「imgタグ」がある事に気付きました。

<h2 id="top_hanako">HANAKOで紹介されました!</h2>
<p>2009.6.11号でRelaLila リラリラ®が紹介されました。</p>
<img src="img/top_hanako_image.jpg" alt="HANAKO" width="490" height="351">
<img class="dotted" src="img/dotted_border.jpg" alt="">
<h2 class="gray_border_blog">元女子十二楽坊Alive2の皆さまが来店されました!</h2>
<img src="img/top_joshi_image.jpg" alt="元女子十二楽坊Alive2" width="490" height="351">
<img class="dotted" src="img/dotted_border.jpg" alt="">

早速、それらを「pタグ」でくくる作業を開始!とりあえず一安心。

<h2 id="top_hanako">HANAKOで紹介されました!</h2>
<p>2009.6.11号でRelaLila リラリラ®が紹介されました。</p>
<p><img src="img/top_hanako_image.jpg" alt="HANAKO" width="490" height="351"></p>
<p><img class="dotted" src="img/dotted_border.jpg" alt=""></p>
<h2 class="gray_border_blog">元女子十二楽坊Alive2の皆さまが来店されました!</h2>
<p><img src="img/top_joshi_image.jpg" alt="元女子十二楽坊Alive2" width="490" height="351"></p>
<p><img class="dotted" src="img/dotted_border.jpg" alt=""></p>

「imgタグ」は高さや幅の設定が有りますが、インライン要素扱いです。
見た目は変わりませんが、正しいコーディングをする事は大事なんです。

しばらくすると、お客様から「トップページが崩れてる」というご指摘をいただきました。
なぜ?

もしやと思いIE6で確認してみると、見事なカラム落ち!

CSSのソースを調べてみると左側のマージンが設定されていました。
いわゆるダブルマージンフロートバグが原因のようです。

IE6で「pタグ」が広がっても問題ないよう、不必要だった右側のマージンを0pxに変更。

div#top_contents p {
    margin:15px 15px 0px 22px;
}

となっている部分を

div#top_contents p {
    margin:15px 0 0px 22px;
}

としました。

やれやれ。いつまでIE6に気を使えばいいのやら…

    Tips!

    ダブルマージンフロートバグとは

    IE6で起こる、ブロック要素の左側のマージンを2倍分表示してしまうバグです。フロートに設定してあるブロック要素に現れます。

    根本的な回避方法は、margin-leftが0になるようにクラスの設計をする事なのですが…、全てがそうもいかずコーダーが最も苦労するポイントの一つです。

2010/09/16 12:57