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

Question

我正在使用1920x1080屏幕和1680x1050显示器的笔记本电脑。 我在弄弄标题时发现，在一个监视器上与另一个监视器上的显示方式有所不同，如下图所示。

左是内部屏幕，右是外部监视器。 一旦将窗口从屏幕拖动到监视器，它就会在两行之间以一个间隙结束，如果将其向后拖动，该间隙将关闭。

我使用了两个伪元素header：before和header：after绘制线条，它们都与header绝对定位。 看来两台显示器之间有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上也有类似的问题。