在非 FF 浏览器上，样式化的 <hr> 边框半径看起来大于定义的高度

Question

<hr>我遇到了 x 浏览器的问题，其中的 a的样式<span>。在 FF 上，线条高 2px，符合 CSS 中的预期和声明。然而，当我在 Safari、Chrome 或 IE9 上查看时，这条线看起来更粗。事实上，当<hr>使用 Safari 的 Firebug 等效项检查 时，它会将其视为4px。

这是 CSS 属性的问题吗border-radius？在 Firefox 上不明显？我希望它看起来像我构建标记和 CSS 的方式以及它在 Firefox 中的显示方式，但我不确定标记有什么问题。

这是它在 Firefox 上的样子：

这是它在 Safari（和 IE9/Chrome）上的样子：

我的标记：

<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/