time 2017/10/17
IE6のバグの中でも、「これはひどいな」と思うバグを紹介します。
このバグを初めて発見した時は、自分の目を疑いました。
書いた覚えのない文字が表示されていたんです。
「タイプミスでもしたかな?」と、ソースコードを見てみても間違っていない。
もちろん他のブラウザでは、きちんと表示されています。
表示されている文字をよく見てみると、どうもすぐ上に書いてある文字が表示されていました。
ソースコードは、以下のようなものです。
<div id="contents"> <!--▼ボックス1ここから--> <div class="box"> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> </div> <!--▲ボックス1ここまで-->> <!--▼ボックス2ここから--> <div class="box"> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> </div> <!--▲ボックス2ここまで--> <!--▼ボックス3ここから--> <div class="box"> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> </div> <!--▲ボックス3ここまで--> </div>
▼FireFoxやChromeなど
▼IE6
解決方法を色々探した結果、原因は『HTMLのコメント』でした・・・
このバグは『floatした要素を囲むようにコメントを書いている』と発生するようです。
それなので解決方法としては・・・
- 1・要素の中にコメントを書く
- 2・<!––[if !IE]><![endif]––>を使ってコメントを書く
- 3・コメントを消してしまう
となります。
▼対策1・要素の中にコメントを書く場合
<div id="contents"> <div class="box"> <!--▲ボックス1ここから--> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> <!--▼ボックス1ここまで-->> </div> <div class="box"> <!--▲ボックス2ここから--> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> <!--▼ボックス2ここまで--> </div> <div class="box"> <!--▲ボックス3ここから--> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> <!--▼ボックス3ここまで--> </div> </div>
▼対策2・IE条件分岐コメントを使う場合
<div id="contents"> <!––[if !IE]>▼ボックス1ここから<![endif]––> <div class="box"> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> </div> <!––[if !IE]>▲ボックス1ここまで<![endif]––> <!––[if !IE]>▼ボックス2ここから<![endif]––> <div class="box"> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> </div> <!––[if !IE]>▲ボックス2ここまで<![endif]––> <!––[if !IE]>▼ボックス3ここから<![endif]––> <div class="box"> <p> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。<br /> 記事の内容をここに書きます。 </p> </div> <!––[if !IE]>▲ボックス3ここまで<![endif]––> </div>
原因と解決方法が分かった時のなんとも言えない気持ちは今でも覚えています。
「IE6は、コメントも好きに書かせてくれないのか」と・・・