futuremix

こんなことに3日も悩んでしまった。div の height を 1px にしても、IE6 ではうまく表示されません。

  <div style="width:100%;height:1px;background-color:red;"></div>

これは次のように表示されます。

Mozilla / Firefox では意図通りに高さが 1px になりますが、IE では1文字分の高さが確保されます。そこで font-size を小さくしたらいいのではないか思い、

  <div style="width:100%;height:1px;background-color:red;font-size:1px;"></div>

のようにしてみましたが、これでも 2px 分は表示されてしまいます。他にも font-size:0px や line-height:1px のようにしてみたのですが、うまくいきません。

結局 overflow プロパティの問題だと気づき、次のようにしたところうまくいきました。

  <div style="width:100%;height:1px;background-color:red;overflow:hidden;"></div>

つまり高さを 1px にしても、文字があると仮定され、はみ出して描画されていたわけです。