先日、わが社の天才コーダーがお客様のサイトを確認していると、
「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