タグメモのカケラ | フロートを組むと、IEで文字の一部が下に複製される

<< IEで、ボーダーがうまく表示されない :: main :: ネットスケープで背景がボックスの下まで表示されない >>

2007.09.10 Monday

フロートを組むと、IEで文字の一部が下に複製される

去年からずーっと後輩のNちゃんと悩んでいた事。
それはフロートを組んだときに、右側のボックスエリアにある文字の一部が下に複製されてしまう事でした。

当時色々と調べたんだけど解決策が見つからなくて、妥協策として<div class="clear"></div>という空のdivを入れてみたり、スペースを入れて複製を見えなくさせてみたり、CSSで高さを指定して消えたこともあったりと…
何ともいい加減な対応しか出来なくて…。
一番まともな（この中では）空のdivを入れるのも、複製は止められなくて、下に変なマージンが空いてしまったり…。

出るときと出ないときがあって、原因も分からないまま半年以上過ぎていたのですが、今回同じ現象が今やってる案件で起こって、丁度時間もあったので色々と本腰を入れて調べてみた結果、やっと原因が分かりました。

これが何て事は無い原因で…。
問題はCSSではなく、htmlにあったのです。

原因：
フロートのボックス指定の間に2行以上のコメントタグを入れると発生する。

言葉で説明しても何のこっちゃ？って感じだと思いますので、サンプルソースを。。。

CSSの指定: #left {
margin: 0px;
padding: 0px;
width: 300px;
float: left;
}

#right {
margin: 0px;
padding: 0px;
width: 500px;
float: right;
}
htmlの指定: 
<div id="left">
<p>こちらは左側です</p>
</div>


<div id="right">
<p>こちらは右側です</p>
</div>

と、このように組むと発生します。
それは、

<div id="left">
<p>こちらは左側です</p>
</div>


<div id="right">
<p>こちらは右側です</p>
</div>

太字の所、ここに2行のコメントタグが入っているから。
このコメントタグの行数が多ければ多いほど、複製される文字数も増えます。

これを

htmlの指定: 
<div id="left">
<p>こちらは左側です</p>
</div>

<div id="right">

<p>こちらは右側です</p>

</div>

と、してあげると、html上で連続したフロート指定のボックスとボックスの間にコメントは1行なので、複製される現象は起こりません。
ただ、これだとコメントをつけるルールが曖昧というか中途半端なので、

htmlの指定: <div id="left">

<p>こちらは左側です</p>

</div>
<div id="right">

<p>こちらは右側です</p>

</div>