我有一台 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 时，他们的 div 上的边框宽度使用 1px，和我一样，但它们的边框始终保持一致。例如，查看 Stack Overflow 上问题之间的边界，或 GitHub 存储库浏览器中文件之间的边界。缩放确实会影响这些网站的边框宽度；例如，如果我放大，边框会增长到 2px，但所有边框都会一致增长。我已经研究了他们的 CSS 很长一段时间，但我不明白他们是如何做到的。我是否缺少一些神奇的 CSS 设置来解决这个问题？或者 div 和表格单元格上的边框的行为是否根本不同？
您可以使用此方法向 chrome 团队报告该错误错误报告链接
考虑对大屏幕进行媒体查询（例如，超过 2k 将具有不同的边框大小）。
@media screen and (min-width: 2560px) {
table, table * {
border: solid 1px black !important;
}
/* or */
* {
border: solid 1px black !important;
}
}
您可以根据自己的喜好更改最小宽度。另外，最好避免使用!important并指定一项额外的特异性（类、标签名称）。