Css在双显示器上显示不一致

Question

我正在使用1920x1080屏幕和1680x1050的显示器的笔记本电脑上工作。 我正在弄乱标题并注意到它在一台显示器上的显示方式与另一台显示器的显示有所不同，如下图所示。

左边是内部屏幕，右边是外部显示器。一旦您将窗口从屏幕拖动到监视器，最终会在两条线之间产生间隙，如果您将其向后拖动则会关闭。

我使用了两个伪元素标题：before和header：after绘制线条，它们都与标题绝对定位。 看来两台显示器之间存在1px的差异，我无法弄清楚为什么会出现这种情况。

关于这里发生了什么的任何想法？ 这些伪元素应该相对定位吗？

编辑：css的相关部分

header {
    display:block;
    height: 100px;
    width: 100%;
    position: fixed;
    top: -5px;
    margin: 0 auto;
    background: #f7fffe;
    z-index: 200;
}
header:after {
    position: absolute; 
    content:''; 
    display:block; 
    top: 1px;
    height:98.5%; 
    width:100%;
    border-bottom:2px solid #00aedb;    
    background: #f7fffe;    
}
header:before{
    position:absolute; 
    top: 6px;
    display:block; 
    content:''; 
    border-bottom:2px solid #025e78;    
    background: #f7fffe;    
    height:98.5%; 
    width:100%; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

我实际上最终将伪元素高度更改为静态99像素，这似乎已经解决了问题。 仍然不确定为什么使用百分比会导致不同的显示，因为标题本身总是100px。

Answer 1

您会注意到您的浏览器本身也处于不同的分辨率。

如今，大多数系统都允许您指定用于扩展应用的各种虚拟分辨率。这非常有用，因为非常高的分辨率屏幕使正常尺寸难以看/读。因此设置了缩放。

您的某个显示器可能配置为110％或类似。

这是一个很好的例子，说明为什么你不能对显示你网页的内容采取任何措施。像素并不总是像素。舍入错误将会发生。

这些天我坚持em尺寸可以相对于基本尺寸扩展所有尺寸。 1em在大多数情况下都是可读的，因此如果您不覆盖它，您的尺寸可能相对于基本尺寸。

Answer 2

请检查浏览器缩放。在某些笔记本电脑中，它默认为125％而不是100％。我在HP上有类似的问题。