为什么HTML中的'hr'会显示额外的半像素？

Question

它只是一个标准的HTML'hr'标签，但该行显示的是一个奇怪的额外像素。我唯一的CSS是：

hr {margin:0%;line-height: 100%;}

显然我没有足够的代表来包含问题的图片，所以你不得不放弃我的描述。

Answer 1

HR在大多数浏览器中使用阴影。您应该使用css或类似的东西覆盖样式：

<hr noshade size="1" />

更新： 不推荐使用noshade ...请参阅http://www.electrictoolbox.com/style-html-hr-tag-css/

Answer 2

使用height属性而不是line-height属性，这应该可以解决您的问题。以下是有关样式hr标记的一些其他信息。 Cross-Browser hr Styling

现在是在评论中，但这是对他有用的修复。 hr {border：none; border-top：1px #CCCCCC solid;身高：1px; }

Answer 3

Css解决方案：

hr {
    border: none;
    background-color: #000;
    color: #000;
    height: 1px;
}

Answer 4

使用CSS的跨浏览器解决方案：

hr { height: 1px; background-color: #000; border: 0 none; }

How I change the thickness of my <hr> tag

的jsfiddle：

http://jsfiddle.net/6nXaN/

Answer 5

hr标记只是呈现为1px高的空元素，边框样式为inset（将hr的高度更改为几个像素以查看我的意思）。由于插入边框的渲染方式，额外的像素位于左侧。如果你添加：

hr { border-left: none; }

...然后你可以保持默认hr的插图外观而不需要额外的像素。使边框样式固定或使其成为黑色背景颜色可能会使您的hr太暗。我更喜欢上述方法的微妙之处。