<hr>要素を点線で表示した場合の表記について

質問

hrで点線を表示したいと考えています。
そこでまず下記Aのような指定をしたのですが、行数を減らすため、Bの表記に変更しました。

意味合い的には変わっていないと思うのですが、
なぜかfirefox等いくつかのプラウザで点線の下に薄いグレーが表示されてしまいました。
IEでは意図した通りに表示されます。

調べた所、薄いグレーはhr本来の色が表示されていること、
Bの表記に color: #fff;　を追記すれば解決することは解ったのですが、
なぜまとめ表記にすることで表示が変わるのかが解らずすっきりしないので
質問させて頂きました。

詳しい方がいらっしゃいましたらよろしくお願いします。

-------------------------------------------------------------※

hr.A {
border-width: 1px 0px 0px 0px;
border-style: dashed;
border-color: #000;
height: 1px;
width: 100%;
}

hr.B {
border-top: 1px dashed #000;
height: 1px;
width: 100%;
}

回答No.1

ORUKA1951 · ベストアンサー

当然、そうなるはずですが？
　すくなくとも、IE以外の(言い換えればウェブ標準の)ブラウザでは同様になるはずです。
borderを簡略化プロパティを使わずに記述すると
hr{
border-top-color: #000;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;

border-top-style:dashed;
border-right-style:none;
border-bottom-style:none;
border-left-style:none;

border-top-width:1px;
border-right-width:0px;
border-bottom-width:0px;
border-left-width:0px;
}
ですね。

ここで、
hr.B {
border-top: 1px dashed #000;
height: 1px;
width: 100%;
}
では、他のborderの値は指定されていませんから、初期値であるmidiamの幅になります。
よって

hr.C{
border-top-color: #000;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;

border-top-style:dashed;
border-right-style:none;
border-bottom-style:none;
border-left-style:none;

border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
}
/* 簡略化プロパティを使うと */
hr.D{
border: transparent none 0px;
border-top: #000 dashed 1px ;
}
で、なければならないことになります。IEは多くのバグがありますから惑わされないように・・私はぺーじ製作ではfirefoxをデフォルトとしています。
なお、width/heightは不要です。

また、いちいちclass名を書くことはしません。
div.section>hr{
border: transparent none 0px;
border-top: #000 dashed 1px ;
}
で本文中のhrは指定できます。
また
div.section hr:last-child{}
とか・・・
　いちいちclass名を書くことはありません。必ず文書構造から特定できるはずです。(HTMLがちゃんと書けていたら)

お礼

丁寧な回答をありがとうございます。
順序立てて説明して頂くことで、スッと納得できました。
見事にIEの罠にはまっておりました・・・。

また、class名に関するご指摘もありがとうございます。
html、cssともに解りやすい文書を書けるようにしたいと思っているので
今後そのあたりも勉強していきたいと思います。

ありがとうございました。