我正在使用一台屏幕为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。
回答 2
Stack Overflow用户
发布于 2017-07-14 04:44:15
你会注意到你的浏览器本身的分辨率也不一样。
如今，大多数系统都允许您为缩放应用程序指定一种虚拟分辨率。这是非常有用的，因为非常高的分辨率屏幕使正常大小很难看到/阅读。因此设置了scaling。
您的某个监视器可能配置为110%或类似。
这是一个很好的例子，说明了为什么你不能对显示你的网页的内容做太多的假设。像素并不总是像素。四舍五入误差将会发生。
我坚持使用em大小，这些天可以相对于基本大小缩放所有内容。1em在大多数情况下都是可读的，所以如果您不覆盖它，那么您的大小可以相对于基本大小。
Stack Overflow用户
发布于 2017-07-14 03:45:42
请检查浏览器缩放。在某些笔记本电脑中，默认为125%，而不是100%。我在惠普one上也遇到了类似的问题。
https://stackoverflow.com/questions/45094202
复制
相似问题
输出css文件而不是内联
角度加载<style></style>标记，而不是css文件
重写CSS文件中的内联CSS，而不是！重要
而不是内联CSS
有没有使用<style>文件而不是css文件的情况？
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
