IEでコンテンツの内容が複製されるバグに悩む

先週から某企業のサイトの一部リニューアルをする仕事に追われ、徹夜が続いています助けて下さい（嗚咽）。納期が短く超特急でのコーディングを要求されているのを言い訳に、所々にレイアウトのためにtableを使ってしまいました…猛省。

そんな中、終わりの見えない仕事にナチュラルハイになりながらページを作成していたのですが、IE6で表示確認してみると、floatさせたコンテンツの内容が勝手に複製されて表示されるという怪現象にはまってしまいました。

一瞬、幻覚でも見てるのかな？と思ったのですが、何度リロードしてもIE6では記述した覚えの無いテキストが表示されていました。ドッペルゲンガー？ゴースト？分身の術？っていうか、わけわかんないYO!

とりあえず、怪現象を再現したページを用意しました。

floatさせた要素が勝手に複製される現象の再現ページ

この怪現象について説明しているサイトをなかなか見つけられなくて苦労したのですが、なんとか答えにたどりつけました。

Explorer 6 Duplicate Characters Bugより
原因はIEのバグで、要約すると以下の方法で簡単に解決できます。

• floatさせてるコンテンツにあるHTMLコメントを削除する
• HTMLコメントを<!–[if !IE]>コメント;<![endif]–>に書き換える

まさかHTMLコメントが原因だったなんて…。ただ、HTMLコメントがあっても、バグが発生しないケースもあるので、IE6で表示確認しないとバグの存在自体に気づかないケースもありそうで、これは怖いかも。

ついでにHTMLコメントがあってもバグらないページも用意しました。
floatさせた要素が勝手に複製される現象の再現ページのおまけ

Social Bookmark :
Category : CSS, HTML | Permalink |