MacIE5で<hr>の表示が間々儘成らないんですけど…

共通スタイル

hr{
 margin : 0 ;
 padding : 0 ;
 display : block ;
 border-style : solid ;
 border-width : 1px 0 0 0 ;
 border-color : red ;
 background-color : transparent ;
}

<hr>をブロック化して、トップにボーダーを引く

その1

素の<hr>を置いてみる。Mozillaでは1pxの赤い線が1本なのに、MacIE5ではグレーの影が…。

その2

様子が変なので、何が起きているのか、高さを50pxにしてみる。

hr.hr2{
 background-color : #FFFFE7 ;
 height : 50px ;
}

もちろんMozillaでは、赤い線1本と背景色の表示になるのですが、MacIE5では、やややや、四方に何かグレーの影が……。これは何?

その3

確認のためボーダーを無くしてみる。

hr.hr3{
 background-color : #FFFFE7 ;
 height : 50px ;
 border-width : 0 0 0 0 ;
}

Mozillaは背景色のみ、MacIE5はくっきりと四方にグレーの線……。なぜだー。

どーやったら、赤い線1本のみになってくれるのでせうか。誰か教えて。

その4

satoshii様より提案

hr.hr4{
 color : red ;
 background : transparent ;
 height : 1px ;
}

おお、上手い具合に出来ました。が、やっぱりMacIE5では1pxより太いのです……。

これで、 border-width : 0 0 0 0 ; にすれば、MacIE5上では1pxの赤い線が出るのですが、Mozillaで何も表示されないのです。

あ、待てよ。四方のグレーの線というのは、colorで指定される色【参照：徒書・2002年4月27日hrのスタイル】なのかしら。ということは、

hr.hr5{
 color : white ;
 background-color : transparent ;
 height : 1px ;
}

おおおおおっ。完成かっ。

まとめちゃうぞ

つまり、<hr>をボーダー化するには、下記の如く指定しる。

hr.hr6{
 display : block ;
 color : white ; ←ここはポイント。親要素の背景色と同じ色を指定すること。transparent にすると何故か「緑」になるので。
 background-color : transparent ;
 height : 1px ;
 border-top : 1px solid red ;
}

やったー。

困ってるた人