与缩放一致的 CSS 边框宽度答案

【问题标题】：Consistent CSS border width with zoom与缩放一致的 CSS 边框宽度
【发布时间】：2021-12-18 00:54:30
【问题描述】：

我有一台 4K 显示器，我的 Windows 缩放设置为 150%，我的 Chrome 缩放设置为 100%。在我使用 Bootstrap 4.5.2 开发的网站上，这会导致 Chrome 显示厚度不一致的表格边框。请注意以下屏幕截图中的两组 4 条线如何比其他更粗（您可能需要缩放图像）：

这是一个在 Chrome 95.0.4638.69 上重现该问题的小示例。这可以在 Chrome 或 Windows 显示设置中将缩放设置为 150% 来重现。

<!DOCTYPE html>
<html>
    <head>
        <title>Annoying Borders</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <table class="table table-sm">
            <thead>
                <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            </thead>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
       </table>
    </body>
</html>

我的理解是，这是由于计算出的边框厚度介于 1 到 2 像素之间的舍入误差造成的，因此 Chrome 有时会显示 1 像素，有时会显示 2 像素。在询问之前，我搜索并找到了使用 0.01px 作为边框厚度的建议解决方法。这确实有效，但并没有真正解决根本原因，而且显然会导致边框在某些浏览器上根本不显示。

当我检查 Stack Overflow 或 GitHub 等网站的 HTML 时，他们使用 1px 作为其 div 上的边框宽度，与我相同，但它们的边框始终是一致的。例如，查看 Stack Overflow 上问题之间的边界，或 GitHub 存储库浏览器中文件之间的边界）。缩放确实会影响这些网站的边框宽度；例如，如果我放大，边框会增加到 2px，但所有边框都会一致增长。我已经在他们的 CSS 中闲逛了很长一段时间，但我无法弄清楚他们是如何做到的。我是否缺少一些可以解决此问题的魔术 CSS 设置？还是 div 和表格单元格的边框的行为根本不同？

【问题讨论】：

请阅读How to Ask。您需要编辑您的问题并将a minimal reproducible example 放入您的问题中。
添加示例...
首先，确保边框没有被 media queries 覆盖（或者您可以尝试内联 CSS 样式 <div styles="border: solid 1px black;></div>" 或类似于您的表格 (jsfiddle.net/UtmostCreator/u2m6owsz)。通过更改 (rem to px 或反之亦然）），或使用!important 确保每个分辨率的样式都相同。我会考虑其他方法来解决它。尝试在没有引导程序的情况下测试通常的表，看看它是否表现良好不同（w3schools.com/html/tryit.asp?filename=tryhtml_table_intro），您应该将苹果表与苹果表进行比较
另外，请看这里：stackoverflow.com/a/42718300/6901693
我已尝试按如下方式覆盖 CSS：.table td { border-top: 1px solid #dee2e6 !important; } 它不起作用。我发现似乎唯一可行的是将其设置为 0.01px，但我不明白为什么 GitHub 和 Stack Overflow 能够在边界上获得一致的缩放，而当我们都使用 1px 时我不能。还查看了您链接的问题，但它似乎没有提供解决方案。我不在乎所有边框是一致 1px 还是2px。它很丑，因为它不一致。

标签： html css google-chrome

【解决方案1】：

很可能，这是一个基于 chrome 的浏览器错误，因为 Firefox 浏览器会适当地处理/呈现它。

您可以使用此bug report link 向 chrome 团队报告该错误

考虑对大屏幕进行媒体查询（例如，超过 2k 会有不同的边框大小）。

@media screen and (min-width: 2560px) {
  table, table * {
    border: solid 1px black !important;
  }
  /* or */
  * {
    border: solid 1px black !important;
  }
}

您可以根据自己的喜好更改最小宽度。另外，最好避免使用!important，并指定一个额外的Specificity（类、标签名）。

【讨论】：

我在这里提交了一个错误：bugs.chromium.org/p/chromium/issues/detail?id=1266546。 “这是一个错误”是一个令人沮丧的答案，但仍然是一个答案，所以我接受了这个。 FWIW，我使用的解决方法只是将边框设置为 0.01px 宽度，而无需任何媒体查询。这在我测试的所有浏览器（Chrome、Edge、Firefox）上都能正常呈现 150% 和 100%，但我没有在 Windows 上测试过 Safari。