2024年04月 / 03月≪ 123456789101112131415161718192021222324252627282930≫05月
2006.12.20(Wed)
Top Page > CSS/XHTML > 【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ!?

【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でのハードコピー
IE6でのハードコピー(IE7の左右のmargin検証)



■FireFoxでのハードコピー
FireFoxでのハードコピー(IE7の左右のmargin検証)



■IE7でのハードコピー
IE7でのハードコピー(IE7の左右のmargin検証)



この状態で、マジで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でのハードコピー
IE7でのハードコピー修正済み(IE7の左右のmargin検証)



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

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

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

10:08  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑

関連エントリー

Loading


Comment

コメントを投稿する

※コメントは承認するまで表示されません。


管理者だけに表示

▲PageTop

Trackback

この記事のトラックバックURL

この記事へのトラックバック

 | BLOGTOP |