【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？

IE7の日本語正式版がリリースされて、暫く立った。
今まで作ったページで特に表示が崩れたり、変になる箇所もなく平穏無事に過ごしてきた。

ある新しいページを作ることになり、IE7で表示を確認するとどーもおかしい。
画像があって、その右側に簡単な説明文が入るというよくみる表示方法でIE7だけで左右のmarginが無視されてしまうのである。

しかも同じようなスタイルを適用している別の箇所では、左右のmarginが効いている。
つまり、同じようなHTMLソースと同じようなスタイルをCSSで指定しているのに、片方は左右のmarignが効き、片方は左右のmarginが無視されているのだ。

一体どういうことだ！？っとソースコードを何回も見直してみるが、誤った記述はない。
あーでもない、こーでもないと色々いじっていたが、全く改善されず。


一行一行シラミツブシにHTMLのコードを読んでいた、ハタと気が付いた。

「コメントアウトの有無じゃねーかよ！！(怒)」

どーもIE7には、HTMLにコメントアウトを入れないと、margin-right、margin-leftを無視するバグがあるみたい。
どういう条件で発生するかはまでは未調査だけど(っと言うか面倒くさい)。

HTMLコードは以下の通り。「<div id="box-area">」の後にコメントアウト行が無いのに注目。
ちなみにHTMLもCSSもエンコードはutf-8。HTMLはXHTML strictで記述し、XML宣言及びDTDあり。

またまたちなみに「<div style="width:400px;">」は見やすくするため幅を与えているだけなので無視しても構わない。無くても現象は再現する。
<div style="width:400px;">

<div id="box-area">
<div id="box-list"><!-- box-list// -->
<div class="box">
<div class="box-image"><img src="images/dammy.gif" alt="dammy" width="65" height="50" /></div>
<div class="box-text"><p>hoge hoge hoge hoge hoge hoge</p></div>
<br class="clear" />
</div>

<div class="box">
<div class="box-image"><img src="images/dammy.gif" alt="dammy" width="65" height="50" /></div>
<div class="box-text"><p>hoge hoge hoge hoge hoge hoge</p></div>
<br class="clear" />
</div>
<br class="clear" />
<!-- //box-list --></div>
<!-- //box-area --></div>

</div>


CSSは以下。
IE6の互換モード対応のために、border、width、paddingを同時に指定しないようにするため、borderを適用するのdiv、widthを適用するdivを分けてある。
IE6をターゲットブラウザにする場合は(しない人は相当マレだろうけど)、現実的な指定だろう。

@charset "utf-8";

div,p { margin:0; padding:0; }
#box-area { border:1px solid #ccc; }
#box-list { width:360px; margin-right:5px; margin-left:5px; padding:5px 0; }
.box { float:left; width:180px; }
.box-image { float:left; width:65px; margin-right:5px; }
.box-text { float:left; width:110px; }
.clear { clear:both; }


以上のコードにより、灰色の画像の左側にはmargin-left:5;が適用され、左端のborderとの空白が存在するはずである。
各ブラウザでのハードコピーが以下。
見事にIE7だけ、左端のborderにピッタリくっ付いてくれる。

■IE6でのハードコピー




■FireFoxでのハードコピー




■IE7でのハードコピー




この状態で、マジで3時間ぐらい悩んでいた。

解決方法はとっても簡単。「<div id="box-area">」の後にコメントアウトを追加してあげる。
本当はコメントアウトじゃなくて、例えば「a」でもmargin-leftが生き返る。半角スペースではダメでした。

<div style="width:400px;">

<div id="box-area"><!-- box-area// -->
<div id="box-list"><!-- box-list// -->
<div class="box">
<div class="box-image"><img src="images/dammy.gif" alt="dammy" width="65" height="50" /></div>
<div class="box-text"><p>hoge hoge hoge hoge hoge hoge</p></div>
<br class="clear" />
</div>

<div class="box">
<div class="box-image"><img src="images/dammy.gif" alt="dammy" width="65" height="50" /></div>
<div class="box-text"><p>hoge hoge hoge hoge hoge hoge</p></div>
<br class="clear" />
</div>
<br class="clear" />
<!-- //box-list --></div>
<!-- //box-area --></div>
</div>


■再びIE7でのハードコピー




見事にmargin-leftが効いてくれる。解決解決である。
全く意外すぎる落とし穴であった。さすがはM＄全くもって油断できない。
(っというかこんなバグってありえるの！？)

こんな現象に見舞われたら、コメントアウトがどうなっているかをチェックしてみよう。意外と簡単に修正できるかもしれないです。。

関連記事

• 【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する
• 【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？
• 【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話
• ユニバーサルセレクタ（*）はもう古い？
• クソIEをハックしてやる！（IEの条件分岐の使い方）
• IE7をスタンドアローンでインスコ
• XHTML+CSSスタンダード・デザインガイド
• 【xhtml/css】xhtml（html）やcssのコードをチェックするツール色々
• 【xhtml/css】linkを記述する時の順序は「LVHA（ラブハ）」で覚えましょう
• 【html/xhtml】ユーザビリティを高める「&lt;label&gt;」の使い方

タグ（ブログ内検索もできます）：CSS Bug バグ IE7 スタイルシート