IEでdivを使って1pxの線を引く裏技

Firefoxだったら、普通に

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

で1pxの線が引けますが、IE(Internet Explorer6)では文字の大きさ分の太い線になってしまいます。

ここで、1文字分あると勝手に解釈されているならば、はみ出した部分は表示しなければ良いのです!
ということで、

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

「overflow:hidden;」を追加します。
これで、FirefoxでもIEでも1pxの線が引けます。

ちなみに、「line-height:1px;」を使ったらどうなるのか?と思ってやってみました。
できたことはできたのですが、なぜか下に数px分余白が出来てしまいました。
ちょっと私の力では、その下の余白が何なのかわかりませんでした。
謎です。
また、この場合、<div>間に&nbsp;(半角)を入れないと1pxの線にはなりませんでした。
つまりこういうこと。

<div style="width:100%;height:1px;line-height:1px;">&nbsp;</div>


CSSもブラウザ依存があるので難しいですね。
top

ホームページ作成に役立つコーナー