;

しんみゆ.com

群馬県高崎市在住の夫婦で日記というか、つぶやきブログしてます:しんみゆ.com

ブロックでできた恐竜

IE6メモ:コンテンツ内容が複製されるバグ

コンテンツ内容が複製される、別の言い方をすると、最後の内容物のゴーストが作成されるとでも言うのでしょうか。もしくは分身とか残像とかそんな感じ。

サンプルソース

<body>
<div id=”container”>
<div class=”left”>
フロートしている内容物左
</div><!–– left ––>
<div class=”main”>
フロートしている内容物中央
</div><!–– main ––>
<div class=”right”>
フロートしている内容物右
</div><!–– right ––>
<div class=”left”>
フロートしている内容物左
</div><!–– left ––>
<div class=”main”>
フロートしている内容物中央
</div><!–– main ––>
<div class=”right”>
フロートしている内容物右
</div><!–– right ––>
</div><!–– container ––>
</body>

一見するとCSSが悪く、CSSが原因でバグが起こっている印象なのですが、実はこれCSSとHTMLの複合バグというかHTML側を修正すれば解決する現象らしい。

解決方法
「floatさせてるコンテンツとfloatさせてるコンテンツの間にあるHTMLコメントを削除する」または、「floatさせてるコンテンツの前のHTMLコメントを削除する」
というもの。

こことかの
<!–– left ––>
これとかを削除するってことらしい。

http://hane.itigo.jp/archives/60

このサイトを参照。

【追記】

1:<!–rightSide–>のコメントを削除する

「鳴かぬなら殺してしまおうホトトギス」ではないですが、こいつのせいでバグるんだったら、いっそ削除してしまえ!という直球ストレートな方法です。
デメリットは、divの開始場所が分かりづらくなること。
完全に一人でwebサイトを作成・管理するのならば問題ないですが、複数人で作成・管理する場合は不便になるかもしれません。

2:<!–rightSide–>のコメントを<!–[if !IE]>rightSide<![endif]–>と記述する

<!–[if !IE]><![endif]–>の部分は、コンディショナルコメントと呼ばれるものです。
コンディショナルコメントはInternet Explorerの条件分岐コメントで、IEの特定のバージョンだけにコメント内部を読み込ませたり、IEだけ読み込ませたり、読み込ませなかったり、様々な指定ができます。
今回の場合は「IE以外のブラウザは読んでください」の意味になります。逆にいえば「IEは読むな~!ちくしょうめ~!」となります。
ちょっとソースの見た目が汚くなりますが、divの開始場所が分かりやすくて良い感じです。

3:複製されている子要素に、margin-right:-3px;を記述する

読んで字の如しの方法です。
IEはなぜだかfloatした子要素のmargin-rightを3pxほど拡張するという挙動をしているようなので、それをネガティブマージンで相殺します。
デメリットは、ネガティブマージンを使っていることでしょうか。

まとめ

この他にも、親要素を3pxだけ広くしたり、コメントを書く位置を<div>の前に変えたり等、様々な回避方法があります。
いろいろな解決策のデメリットを考えた場合、私は2の方法での回避が妥当ではないかな~と思います。

 

コチラ http://watakushigoto.com/blog/index.php?e=15 より参照。

ページトップ