CSS边框：1px显示为0.667px或1px，具体取决于计算机/显示器分辨率(？) [英] css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)

问题描述

这太奇怪了。我正在测试同一个Web应用程序(Chrome嵌入到Electron中)，我在两台计算机上有两个一模一样的副本，都是Windows10，一台是1080p显示器，另一台是4K显示器(这应该是无关紧要的，我猜是编辑：现在我开始认为这就是问题所在)。

但是，当我在两个站点运行该应用程序时，我看到了一个无法解释且不知道如何修复的差异，除了不使用BORDER参数之外。

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

究竟为什么会发生这种情况？

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

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

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

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

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

推荐答案

我正在努力查找有关此问题的任何明确信息，但我对发生此情况的原因相当有信心。

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

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

铬透明地缩放高DPI，因此在Web检查器中您仍然可以看到原始的CSS值。因此，尽管您的10pxfont-size现在实际上呈现为15px，但它在检查器中仍然显示为10px。为显示边框未放大，1px除以1.5，得出0.667px。

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

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

这篇关于CSS边框：1px显示为0.667px或1px，具体取决于计算机/显示器分辨率(？)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！