css 边框：1px 显示为 0.667px 或 1px，具体取决于计算机/显示分辨率（？）答案

【问题标题】：css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)css 边框：1px 显示为 0.667px 或 1px，具体取决于计算机/显示分辨率（？）
【发布时间】：2017-07-31 08:31:46
【问题描述】：

这很奇怪。我正在测试同一个 Web 应用程序（Chrome 嵌入 Electron），我在两台计算机中有两份完全相同的副本，两台都是 Windows 10，一台有 1080p 显示器，另一台有 4K 显示器（这应该无关紧要，我猜是编辑：现在我开始认为这是问题所在。

但是，当我在两个站点中运行应用程序时，我发现了一个我无法解释的差异，我不知道如何解决，除了不使用边框参数。

问题在于，在圆形或方形中使用border: 1px solid #000，在一台计算机上计算为1px，而在另一台计算机上计算为0.667px。 p>

到底为什么会这样？

编辑：我可以看到我尝试的任何边框都会发生这种情况。我可以看到，如果我放 2px，那么它计算为 2px，但 1px 中的任何东西在 4K 计算机中计算为 0.667px

EDIT2：与em 相同，0.2 的em 计算为2px，0.1 的计算为0.667px。从0.132 和0.133 em 计算，它从 0.667 跳到 1.333 px，不可能得到 1px（！！）

左 -> 线条未对齐，因为带边框的正方形不添加 2px 而是 0.667x2（计算机 1）

右 -> 线条对齐，因为边框计算为 2px（计算机 2）

您可以在下面看到Chrome开发的控制台信息

【问题讨论】：

标签： html css google-chrome electron resolution

【解决方案1】：

我正在努力寻找有关这方面的任何确切信息，但我对为什么会发生这种情况相当有信心。

4K 屏幕具有如此高的像素密度，Chromium 将页面上的元素放大，以使它们在 4K 屏幕上看起来不那么小。在这种情况下，它似乎使用了 1.5 的比例因子。从您的屏幕截图中可以清楚地看出这一点：文本和框在 4K 屏幕上显示大约 1.5 倍。

那么为什么 1px 的边框也不能放大到 1.5px 呢？因为它看起来不脆。似乎有一个假设，当你指定一个 1px 的边框时，你真正想要的是屏幕支持的最小边框，所以你在 4K 屏幕上仍然得到 1px，因此它看起来仍然很清晰。

Chromium 透明地缩放以实现高 DPI，因此在网络检查器中您仍然可以看到原始 CSS 值。所以虽然你的 10px font-size 现在真的被渲染为 15px，它在检查器中仍然显示为 10px。为了显示边框没有放大，1px 除以 1.5，得到 0.667px。

这种行为在我看来是明智的，但作为副作用，它会打乱你的定位。以下是一些可能的解决方法：

为所有框添加 1px 边框，使边框与不需要黑色边框的框颜色相同。这将确保他们都排成一列。
使用box-sizing: border-box 使框的指定宽度和高度包括边框。默认值 (content-box) 在指定的框大小之外添加边框，这就是您目前遇到对齐问题的原因。

【讨论】：

太棒了。非常感谢:)
感谢您的解释，我遇到了同样的问题，但为了解决它，我使用了 'border: #ccc .1em solid;'，我觉得这是使用 em 的完美情况是一个相对单位:)

【解决方案2】：

您为什么不使用@media screen 并适应您的需要？

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

【讨论】：

您能详细说明一下吗？