IE6でfloatで並べた要素の末尾の文字が下に複製されてしまう

IE6でfloatで並べた要素の末尾の文字が下に複製されてしまうバグと解決方法のご紹介。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

これはfloatした複数の要素の横幅合計と、それらを包含する親要素のwidthプロパティの差が3px未満(0~2px)で、HTMLソース内でfloatしている要素の前にコメントが入ってる場合に起こるようです。

HTML

<div id="wrapper">
    <p>テキスト1</p>
    <!--コメント-->
    <p>テキスト2</p>
    <!--コメント-->
    <p>テキスト3</p>
</div>

CSS

div#wrapper { width: 300px; }
div#wrapper p {
    float: left;
    width: 98px;
    border: 1px solid #000;
    background-color: #f5f5f5;
}

解決方法

floatした複数の要素の横幅合計と、それらを包含する親要素のwidthプロパティの差を3px以上にするか、コメントを消すと解決できます。

  

共有やブックマークなど

コメントは受け付けていません。