css边框:1px显示为0.667px或1px,具体取决于计算机/显示器分辨率(？)

Question

这很奇怪.我正在测试相同的网络应用程序(嵌入Electron的Chrome),我在2台计算机上有两个精确的副本,两个都是10个,一个是1080p显示器,另一个是4K显示器(这应该是无关紧要的,我想这是编辑:现在我开始认为这是问题所在.

但是,当我在两个站点中运行应用程序时,除了不使用border参数外,我看到了无法解释的差异,我不知道如何修复.

问题是,通过border: 1px solid #000在圆形或方形中使用,在一台计算机中,它计算为1px,在另一台计算机中计算为0.667px.

为什么发生这种情况？

编辑:我可以看到这发生在我尝试的任何边界.我可以看到,如果我放2px,那么它计算为2px,但1px中的任何东西在4K计算机中计算为0.667px

EDIT2:与同em,一个em的0.2单位计算作为2px的,且0.1单位计算作为0.667px.从0.132和0.133它一起从0.667跳到1.333 px计算,不可能获得1px(!!)

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

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

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

Answer 1

我很难找到关于此的任何确切信息,但我对为什么会发生这种情况充满信心.

4K屏幕具有如此高的像素密度,Chromium正在缩放页面上的元素,使它们在4K屏幕上看起来不那么小.在这种情况下,它似乎使用1.5的缩放因子.从截图中可以清楚地看到:4K屏幕上的文本和方框都显示大约1.5倍.

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

Chromium透明地对高DPI进行缩放,因此在Web检查器中您仍然可以看到原始CSS值.因此,虽然你的10px font-size现在真的被渲染为15px,但它仍然在检查器中显示为10px.为了向您显示边框没有按比例放大,1px除以1.5,得到0.667px.

这种行为对我来说是明智的,但作为一种副作用,它会弄乱你的定位.以下是一些可能的解决方法:

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