float要素の末尾のテキストが意図しない場所に複製表示される問題 : CSS

Tweet

Pocket

float要素に記述したテキストの中で末尾のテキストが意図しない場所に複製表示される問題についての覚書。

現象

フロートボックスのテキストの末尾にある数文字が、複製されて意図しない場所(ボックス外など)に表示される。
２段組,３段組,それ以上でもこの現象が発生しない場合もある(発生しないほうが多数?)。

解決策

下記の(1),(2)のどちらかで解消(どちらでも解消された)
(1) フロートしている各ボックスの横幅の合計を、包含ボックスの横幅より3px以上小さくする。
(2)問題が発生しているフロートボックスを中心にコメントを削除(フロートしているボックス内のコメントだけとは限らない)

発生したコード

<div class="content" style="width:500px; height: 500px;">
    <div id="sidebar" style="width:100px; height: 500px; float: left;">～</div>
    <div id="mainGraphic" style="width:400px; height: 100px; float: right;">～</div>
    <div id="main" style="width:300px; height: 400px; float: left;">～</div>
    
    <div id="extrabar" style="width:100px; height: 400px; float: right;">この要素で発生。このボックス内の最後の文章の数文字が複製され意図しない場所に表示。pやulなどタグを変更して文章を囲んでも同様に意図しない場所に表示</div>
</div>

※WordPressのテンプレートで表示したときは上記の現象が発生したが、べた組みのHTML,CSSの場合は発生しなかった(再現も難しい)。

解決策1

mainGraphic ⇒ width: 397pxへ変更
extrabar ⇒ width: 97pxへ変更

解決策2

コメント<!– extrabar –>を削除

参考記事 » IE6 で文章の最後の2文字（くらい）が変なところに表示されてしまう問題の原因と解決法。