Question

我不知道为什么，但是当我尝试在CSS中设置水平规则的样式时，其他所有小时看上去都不一样。见下文：

当我将边框尺寸增加到2px时，顶部和底部边框之间的间隙被填充，但是水平规则的一半比其他规则要厚。

我的代码：

hr {
    border: 1px solid #07234f;
    width: 300px;
}

    <body>
        <hr>
        <hr>
        <hr>
        <hr>
    </body>

我希望所有水平规则看起来都相似。知道为什么它们看起来不同吗？我该如何解决这个问题？

Answer 1

您正在hr的所有面上放置边框。但是，例如Chrome，已经有一个用户代理样式表，可以在hr上设置插入边框样式。我能够在各个px单元中复制您的问题。

解决此问题的一种方法是：

杀死用户代理样式表可能在背后实现的边界：border: 0
然后沿着单个边缘（顶部或底部）设置边框，并将其设置为您想要的px值。（我选择了border-top: 2px。）
在hr上设置一个明确的高度，该高度等于您为border-top选择的像素值，以防止（在这种情况下）Chrome的用户代理样式表在您的元素上显示border-style: inset。 / li>

hr {
    border: 0;
    border-top: 2px solid #07234f;
    height: 2px;
    width: 300px;
}

<body>
        <hr>
        <hr>
        <hr>
        <hr>
    </body>

另一种方法可能是自己明确设置各个border属性，以避免混淆Chrome应用哪种边框样式（看来即使使用border: 1px solid #000000，Chrome仍然坚持应用{ {1}}样式）。

inset

更新

实现双线的一种方法是设置具有明确高度的顶部和底部边框：

    hr {
        border-width: 2px 0 0 0;
        border-style: solid;
        border-color:  #07234f;
        width: 300px;
    }

您还可以像这样使用hr { border-width: 2px 0 2px 0; height: 4px; border-style: solid; border-color: #07234f; width: 300px; margin: 16px auto; }：

border-style: double

此外，以下是您hr { border-width: 4px 0 0 0; border-style: double; border-color: #07234f; width: 300px; margin: 16px auto; }样式需求的灵感来源：https://css-tricks.com/simple-styles-for-horizontal-rules/

有些陈旧，但可能会给您一些想法。

更新2

这很好用，尽管我仍然在各种缩放级别上看到一些像差。正常变焦时，以下内容对您有用吗？只是当您手动缩放视口时才能看到像差吗？

这是一个难题。

hr