コンテンツ内容が複製される、別の言い方をすると、最後の内容物のゴーストが作成されるとでも言うのでしょうか。もしくは分身とか残像とかそんな感じ。
サンプルソース
<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の方法での回避が妥当ではないかな～と思います。
