<hr> 标签呈现不同的高度

Question

<hr>我的网站上的 某些标签有问题。
参考图像

正如你在这个非常简单的小提琴看到https://jsfiddle.net/bau1hp9L/的<hr>标签不都呈现相同的高度。

的 CSS<hr>非常简单，所以不会受到其他东西的干扰......

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

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

我希望所有的<hr>都具有 1px 的高度。

更多信息：

如果我在浏览器中调整 css，它并不总是显示更大的相同项目。例如，我将高度设置为 1px，然后设置为 0.5px 然后返回等等。 - 现在是一个不同的<hr>标签，显示得更厚（不幸的是，无法在 jsfiddle 中重现）

如果我将<hr>'s设置为height: 0.5px，那么现在<hr>太大的 会以 1px 的高度呈现 - 根据需要，但另一个<hr>'s 会随机消失。

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

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

有什么猜测吗？

Answer 1

尝试切换到“细化”而不是指定像素高度：

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

这对我来说修复了，在所有缩放级别。（不过，目前仅在 Chrome 和 Opera 中进行了测试。）它也感觉更具描述性：我不在乎它有多少像素，我只是希望它看起来像一条细线。

在这里找到（在输入框的上下文中），他们从https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc得到它（似乎它是大约 2 年前 Chrome 62 中引入的错误/功能）。