hr下面有一个黑色像素？

Question

我们有一条hr线，下方有一个奇怪的黑色像素。

屏幕截图：http://i52.tinypic.com/2vwxy78.jpg

我们的代码：

HTML：

<hr />

CSS：

hr {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #AAAAAA;
    clear: both;
    height: 0;
    margin: 12px 0 18px;
}

浏览器： 火狐

为什么这个像素出现在<hr />下方？我们如何解决这个问题？

Answer 1

您需要重置 border的所有<hr>属性。特别是你的情况下的左边框。所以：

border: 0;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #AAAAAA;
....

查看 - http://jsfiddle.net/uwed3/

Answer 2

您尚未删除<hr>元素上的默认样式。

将此添加到您的CSS：

border-left: 0;

你应该修好。