1

<hr>内ののスタイル設定でxブラウザの問題が発生しています<span>。FFでは、線は予想どおり2pxの高さであり、CSSで宣言されています。ただし、Safari、Chrome、IE9で見ると、線がかなり太く見えます。実際、<hr>SafariのFirebugに相当するもので検査すると、4pxと見なされます。

border-radiusこれはFirefoxでは明らかではないCSS属性の問題ですか？マークアップとCSSを作成した方法と、Firefoxでどのように表示されるかを確認したいのですが、マークアップの何が問題になっているのかわかりません。

Firefoxでの外観は次のとおりです。

FirefoxのHR

Safari（およびIE9 / Chrome）での外観は次のとおりです。

SafariのHR

私のマークアップ：

<span id="course_divider"><hr></span>

私のCSS：

#course_divider {
    left: 0;
    padding-top: 40px;
    position: absolute;
    top: 27px;
    width: 25px;
}

#course_divider hr {
    background-color: #000000;
    border: 1px solid black;
    border-radius: 7px 7px 7px 7px;
    height: 2px;
}
4

2 に答える 2

4

から削除heightします

#course_divider hr {
    background-color: #000000;
    border: 1px solid black;
    border-radius: 7px 7px 7px 7px;
    height: 2px;
}

あなたはあなたの解決策を得るでしょう:-)

デモ http://jsfiddle.net/kMhEv/2/

于 2012-09-10T11:16:44.300 に答える
1

これは、ボックスモデルに関連するCSSの問題にすぎません。

高さは2px、境界線の幅は1pxです。

したがって、ボックスモデルは上/右/下/左に1pxで作成されます。

したがって、境界線の幅= 4pxの高さの場合、高さ2px+上+下1pxになります。

2pxの高さを削除すると、すべて問題ないはずです。

背景色も必要ありません。

#course_divider hr {
 border: 1px solid black;
 border-radius: 7px 7px 7px 7px;
}
于 2012-09-10T11:52:56.807 に答える