今日、xhtml+CSSでサイトを作成しているときに不思議な現象が起こりました。
floatを使って4段カラムを作ったら、なぜか最後の文字が二重に表示されました。
これは一体何なのでしょう？

実際にはこんな簡単なソースではないのですが、要約すると以下のようなソースを書いていました。

====================================
<div style="width:150px;float:left;">内容1</div>
<div style="width:150px;float:left;">内容2</div>
<div style="width:150px;float:left;">内容3</div>
<div style="width:150px;float:left;">内容4</div>
====================================

こうすれば、4段カラムの出来上がりです。
しかし、なぜかIEだけ、内容4の「4」の文字が二つ表示されてしまいました。
簡単に書いたら、こんな感じです。

====================================
内容1 内容2 内容3 内容4

4
====================================

へんなところに「4」の文字が！！！
一体何なのでしょうか？
とりあえず、1時間程度悩んでみました。

それで、改修する方法を発見。
====================================
<div style="width:150px;float:left;">内容1</div>
<div style="width:150px;float:left;">内容2</div>
<div style="width:150px;float:left;">内容3</div>
<div style="width:150px;float:left;">内容4</div>
<br style="clear:both;" />
====================================

でも、htmlソースに意味のないソースを書くのはすっごく躊躇われました。
個人的なものだったらいいですけど、客先に出すものですから。

それで、ぐぐってみた。
ネットは便利ですね。ある程度、わかりました。
IEでは、floatを指定すると、3px程度隙間が空いてしまうらしい。
テンプレートの幅を余分なく、150px×4＝600pxに固定していたので、実際は4段カラムはテンプレートより大きい状態になっていたようです。
そのせいで、バグが起こっていたもよう。

しかし、私は全称セレクタ(*)を使用して、全ての要素に「morgin:0;padding:0」をしているので、そんなこと起こるのか？？？と思ったのですが、試しにひとつのカラムを例えば、145pxとしてみたら、あら不思議、最後の文字が二重に表示されるのは解消しました！
一体、何px小さくしたら、このバグは解消されるのかと思って試してみたら、4つのカラムの横幅をテンプレートの横幅より、3px小さくしたところでこのバグは解消されました。

一体何なのでしょう。この3pxの余白は。。。
とりあえず、IEのバグのようですね。


あまり余白なくテンプレートを作成するのもよくないのかなぁ？と思った今日でした。