IE8・Firefoxで「border:dotted」を使って下線をひ

IE8・Firefoxで「border:dotted」を使って下線をひくとうまく表示されません。
IE7では正常に下線がひかれるのですが、IE8やFirefoxでは「間隔の広いドット線で」対象が「上下左右囲われて」しまいます。

CSSの記述は以下のようにし、htmlで下線をひきたい対象を<div>で囲っています。
　border-width:0px 0px 1px 0px;
　border: dotted gray;

できればどのブラウザでも極力同じ見え方にしたいのですが、可能でしょうか？
ご存知の方、ご教授の程よろしくお願いいたします。

No.1 ベストアンサー 回答者： steel_gray 回答日時： 2010/04/24 12:24

border: dotted gray;

↓(省略された部分を補足)
border: dotted gray medium;

と、解釈されるのがCSSの正しい仕様です。
前に書いた指定が上書きされているので
記述順序を入れ替えればok。

ただ、記述を一部省略した場合の解釈は結構複雑なので、省略はしない方が無難です。
（意識して省略するのはもちろんOKだけど）

border: dotted gray 0px;
border-bottom-width: 1px;

思い通りになって見えたのはIE7のバグかな
古いIEより新しいIE、IEよりは他のブラウザ　が正しい挙動をする事の方が多いです。

この回答へのお礼

ありがとうございます！
できました！

なるほど、下の記述で上書きされるとは知りませんでした。
にしてもIE7・・・ｗ

お礼日時：2010/04/24 14:14