为什么我在 HTML 中的“hr”显示有一个额外的半像素？答案

【问题标题】：Why is my 'hr' in HTML displaying with an extra half pixel on it?为什么我在 HTML 中的“hr”显示有一个额外的半像素？
【发布时间】：2013-04-08 23:27:30
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

它现在在 cmets 中，但这是对他有用的修复方法。 hr {边界：无；边框顶部：1px #CCCCCC 实心；高度：1px； }

【讨论】：

【解决方案2】：

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

<hr noshade size="1" />

【讨论】：

【解决方案3】：

Css 解决方案：

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

【讨论】：

【解决方案4】：

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

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

jsFiddle：

【讨论】：

【解决方案5】：

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

hr { border-left: none; }

...那么您可以在没有额外像素的情况下保持默认 hr 的插图外观。将边框样式设为纯色，或将其设为黑色背景色可能会使您的 hr 太暗。我更喜欢上述方法的微妙之处。

【讨论】：