CSS边框：1像素在不同电脑/显示器分辨率下可能呈现为0.667像素或1像素。

Question

这很奇怪。我正在测试同一个网页应用（嵌入在Electron中的Chrome），我有两个完全相同的副本，分别在两台电脑上运行，都是Windows 10系统，一个是1080p显示屏，另一个是4K显示屏（我想这应该不相关，但现在我开始认为这可能是问题所在）。

然而，当我在两个电脑上运行应用程序时，我看到了一种无法解释的差异，我不知道如何解决，除了不使用border参数。

问题是，在圆形或正方形中使用 border:1px solid #000，在一台电脑上计算为1px，而在另一台电脑上计算为0.667px。

这到底是怎么回事？

编辑：我发现这发生在我尝试的任何边框上。我可以看到，如果我放置2px，则会计算为2px，但任何1px的东西都会在4K电脑上计算为0.667px。 编辑2：与em相同，0.2的em计算为2px，0.1的em计算为0.667px。从0.132和0.133的em跳转到计算为1.333px的0.667px，不可能获得1px（!!）

左侧 -> 由于带边框的正方形仅增加了0.667x2（计算机1），因此行未对齐。

右侧 -> 由于边框计算为2px（计算机2），因此行已对齐。

下面是Chrome开发控制台信息。

- GWorking

Answer 1

我很难找到确切的信息，但是我相当有信心知道为什么会发生这种情况。

4K屏幕具有如此高的像素密度，以至于Chromium会将页面上的元素放大，以使它们在4K屏幕上看起来不会太小。在这种情况下，它似乎使用了1.5倍的缩放因子。从您的屏幕截图可以清楚地看到：在4K屏幕上，文本和框都似乎放大了约1.5倍。

那么为什么1像素边框不会按比例缩放到1.5像素呢？因为它看起来不够清晰。似乎有一个假设，即当您指定1像素边框时，您真正想要的是屏幕支持的最小边框，因此在4K屏幕上仍然保持1像素，因此看起来仍然很锐利。

Chromium对高DPI进行透明缩放，因此在Web检查器中仍会显示原始CSS值。因此，尽管您的10px font-size现在实际上被渲染为15px，但在检查器中仍显示为10px。为了向您显示边框未被放大，将1像素除以1.5，得到0.667像素。

这种行为让我感到很合理，但它会影响到您的定位。以下是一些可能的解决方法：

1. 在所有框中添加1像素边框，使边框颜色与不需要黑色边框的框的颜色相同。这将确保它们都对齐。
2. 使用box-sizing: border-box，使指定的框的宽度和高度包括边框。默认值（content-box）将边框添加到指定框大小之外，这就是为什么您当前存在对齐问题的原因。

- Justin Emery

---

太棒了。非常感谢 :) - GWorking

感谢解释，我遇到了完全相同的问题，但为了解决它，我使用了'border: #ccc .1em solid;'，我觉得这是使用相对单位em的完美情况 :) - Jayem

那么，有没有办法禁用Chrome做这件事？我需要看到精确的尺寸。 - TotalAMD

Answer 2

为什么不使用@media screen并根据您的需求进行适应？

@media screen and (min-width: 2160px) {border:？

- Robert

---

你能再详细解释一下吗？ - GWorking