真奇怪我正在测试同一Web应用程序(Electron中嵌入的Chrome),并且在两台计算机上都有两个完全相同的副本,两个都是Windows 10,一个带有1080p显示屏,另一个带有4K显示屏(这应该无关紧要,我想这是可编辑的) :现在我开始认为这是问题所在)。
但是,当我在两个站点中都运行该应用程序时,除了不使用border参数之外,我无法解释且不知道如何解决该差异。
问题在于,通过在圆形或正方形中使用border: 1px solid #000
,在一台计算机上它的计算结果为 1px ,而在另一台计算机中的计算结果为 0.667px 。
为什么这在发生呢?
编辑:我可以看到这种情况发生在我尝试的任何边界上。而且我可以看到,如果我放2px,则其计算结果为2px,但是在4K计算机中,1px中的任何数据都将计算为0.667px
EDIT2 :与em
相同,em
的0.2
计算为2px,而0.1
的0.132
计算为0.667px。从0.133
和ojit_code em从计算的0.667跳到1.333 px,不可能得到1px(!!)
左->线条未对齐,因为带有边框的正方形不加2px,而是0.667x2(计算机1)
右->对齐线,因为边界计算为2px(计算机2)
在下面,您可以看到Chrome开发的控制台信息
最佳答案
我正在努力寻找与此有关的任何明确信息,但是我对为什么会发生这种情况非常有信心。
4K屏幕具有很高的像素密度,因此Chromium正在按比例放大页面上的元素,以使它们在4K屏幕上看起来不会很小。在这种情况下,它似乎使用的是缩放因子1.5 。从屏幕截图中可以清楚地看出:在4K屏幕上,文本和框都显示大了约1.5倍。
那么为什么1px边框也不能放大到1.5px?因为它看起来不清晰。似乎有一个假设,当您指定1px边框时,您真正想要的是屏幕支持的最小边框,因此您在4K屏幕上仍然会得到1px,因此看起来仍然很清晰。
Chrome 可以透明地缩放高DPI,因此在Web检查器中您仍然可以看到原始CSS值。因此,尽管您的10px font-size
现在实际上已渲染为15px,但在检查器中仍显示为10px。为了显示边框尚未放大,将 1px除以1.5,得到0.667px 。
这种行为使我感到明智,但副作用是它弄乱了您的位置。以下是一些可能的解决方法:
box-sizing: border-box
,以使框的指定宽度和高度包括边框。默认值(content-box
)将边框添加到指定的框大小之外,这就是您当前遇到对齐问题的原因。 关于html - CSS边框: 1px appear as 0. 667px或1px,具体取决于计算机/显示分辨率(?),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42710882/