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