html - 风格化在非 FF 浏览器上显示的边框半径大于定义的高度

Question

我<hr>在<span>. 在 FF 上，该行是 2px 高，如预期和 CSS 中所声明的那样。然而，当我在 Safari、Chrome 或 IE9 上查看它时，这条线看起来要粗得多。事实上，当<hr>使用 Safari 的 Firebug 等效项进行检查时，它会将其视为4px。

border-radius这是 Firefox 上不明显的 CSS 属性的问题吗？我希望它看起来像我如何构建标记和 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/

Answer 2

这只是你的css与盒子模型相关的问题。

您的高度为 2 像素，边框宽度为 1 像素。

因此，在顶部/右侧/底部/左侧创建了 1px 的盒子模型。

所以你 2px 高度加上 1px 顶部 + 底部边框宽度 = 4px 高度。

删除 2px 的高度，它应该一切都好。

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

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