与缩放一致的 CSS 边框宽度

Question

我有一台 4K 显示器，我的 Windows 缩放设置为 150%，我的 Chrome 缩放设置为 100%。在我使用 Bootstrap 4.5.2 开发的网站上，这会导致 Chrome 显示粗细不一致的 table 边框。请注意在下面的屏幕截图中，有两组 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 作为边框厚度。这确实有效，但它并没有真正解决根本原因，而且显然会导致边框在某些浏览器上根本不显示。

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

Answer 1

很可能，这是一个基于 chrome 的浏览器错误，作为 Firefox 浏览器 handles/renders 它是恰当的。

您可以使用此 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 并指定一个额外的特异性（class，标签名称）。

与缩放一致的 CSS 边框宽度

Consistent CSS border width with zoom

html

css

google-chrome

很可能，这是一个基于 chrome 的浏览器错误，作为 Firefox 浏览器 handles/renders 它是恰当的。