Question

我的网站上有些<hr>标签存在问题。
reference image

正如您在这个非常简单的小提琴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高度，但是对我来说似乎有点跷... 我真的不想根据父div的字体大小来缩放高度。我希望它的高度为1px。

编辑：请尝试垂直调整JSFiddle预览窗口的大小-您最终也将遇到这种情况。

有任何猜想吗？

Answer 1

您的标签有问题，我更改了代码，请检查它-

 <head>
 </head>
 <div class="container">
 <hr>
   <section>
       Hallo
    </section>
  <hr>
    <section>
       Hallo2
    </section>
 <hr>
    <section>
       Hallo3
    </section>
</div>

字体大小基本上有问题。

Answer 2

您很有可能正在缩放Web浏览器，并且1px的高度有时会缩放不均匀，即在150％缩放时，页面的某些像素将被复制，而有些则不会。

将视图缩放比例重置为100％。

Answer 3

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

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

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

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

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

3 个答案: