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

Question

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

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

显然我没有足够的代表来包含问题的图像，所以你必须离开我的描述。

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

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

<hr noshade size="1" />

score 2 · Accepted Answer

解决方案：

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

score 1 · Accepted Answer

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

hr { border-left: none; }

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

score 1 · Accepted Answer

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

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

jsFiddle：

5 回答 5