IE で div の高さを 1px にする方法

2005-7-24 21:07
このエントリーをはてなブックマークに追加

こんなことに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 にしても、文字があると仮定され、はみ出して描画されていたわけです。

コメントはまだありません

No comments yet.

Sorry, the comment form is closed at this time.

32 queries. HTML convert time: 0.069 sec. Powered by WordPress. Valid XHTML
Copyright © 2003-2017 @ futuremix.org ログイン