樣式<hr>的邊界半徑在非FF瀏覽器上出現大於定義高度

Question

我在<span>中遇到了<hr>樣式的x瀏覽器問題。在FF上，如預期和CSS中聲明的那樣，該行高2px。但是，當我在Safari，Chrome或IE9上查看時，這條線看起來要厚得多。事實上，當<hr>使用Safari的Firebug等價物進行檢測時，它會將其視爲4px。

這是一個在Firefox上不明顯的border-radius CSS屬性的問題？我希望它看起來像我已經構建了標記和CSS以及它在Firefox中的顯示方式，但我不確定標記有什麼問題。

這是它的外觀上的Firefox：

這是它的外觀上的Safari瀏覽器（和IE9 /瀏覽器）：

我的標記：

<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; 
} 

Answer 1

取出height從

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

你會得到你的解決方案:-)

演示http://jsfiddle.net/kMhEv/2/

Answer 2

它只是在相對於盒模型你的CSS問題。

您的高度爲2px，邊框寬度爲1px。

因此，盒子模型在頂部/右側/底部/左側用1px創建。

因此，您的2px高度加上1px頂部+底部的邊框寬度= 4px高度。

刪除2px高度，它應該都很好。

您的背景顏色也不是必需的。

#course_divider hr { 
border: 1px solid black; 
border-radius: 7px 7px 7px 7px; 
}