html - 标签以不同的高度呈现

Question

我遇到了一些 <hr> 的问题我网站上的标签。
reference image

正如您在这个非常简单的 fiddle 中看到的那样 https://jsfiddle.net/bau1hp9L/ <hr>标签并非都以相同的高度呈现。

<hr> 的 CSS非常简单，所以没有其他东西的干扰......

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

关于为什么会发生这种情况的任何想法？

我想要所有的<hr>的高度为 1px。

更多信息:

如果我调整浏览器内的 css，并不总是相同的元素显示得更大。例如我将高度设置为 1px，然后设置为 0.5px，然后返回等等。 - 现在是不同的 <hr>显示更粗的标签(不幸的是无法在 jsfiddle 中重现)

如果我设置 <hr>到height: 0.5px , 现在 <hr>太大的渲染高度为 1px - 根据需要，但另一个 <hr>的随机消失。

如果我设置height: 0.05em我得到了所有 <hr> 所需的 1px 高度的，但对我来说似乎有点 hacky...我真的不想根据父 div 的字体大小来缩放高度。我希望它的高度为 1px。

编辑:请尝试垂直调整 JSFiddle 预览窗口的大小 - 然后您最终也会遇到这种行为。

有什么猜测吗？

Answer 1

尝试切换到“薄”而不是指定像素高度:

hr {
  border-top: thin solid #243588;
}

这为我解决了所有缩放级别的问题。 (不过，目前仅在 Chrome 和 Opera 中测试过。)它也更具描述性:我不在乎它有多少像素，我只是希望它看起来像一条细线。

找到 (in context of input boxes) here他们从https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc得到它(这似乎是大约 2 年前在 Chrome 62 中引入的错误/功能)。