ie6でテキストが複製されboxからはみ出るバグ

  • 投稿日:
  • by
  • カテゴリ:

ホームページ表示のブラウザチェックをしていたところie6でテキストが複製され、boxからはみ出てしまう事態に遭遇。

ie6以外では正常に表示されているので、もちろんソースを見ても余分な記述はない。

ie6でテキストが複製されてしまった。

boxを入れ子にしてfloatさせている部分で横幅はきっちりの数字。

でも、こういったレイアウトはie6には注意が必要ですね。

CSSを変更してもダメ。

いろいろと調べてみたところ、ie6では、floatさせたボックスとボックスの間に(終了タグの直後)コメントアウトがあると表示が崩れることがあるようです。

複製されてしまっているテキスト回りのコメントアウト部分をひとつづつ消去しながら確認。

</div><!--box01-->←この部分を削除

見事、複製されたテキストは消え、正常な表示に戻りました。

しかし、ボックスの入れ子の場合、できればわかりやすく終了タグにコメントをつけておきたいと思い、終了タグの直後ではなく直前にコメントをつけてみた。

<!--box01--></div>

これならコメントアウトしても正常に表示されるようです。

コーディング時のie6対策の基本としてコメントアウトは全て終了タグの直前につけるように決めておくといいですね。