为什么在Firefox和Chrome中2px边框的渲染高度高于2px?

时间:2017-04-04 13:40:13

标签: html css google-chrome firefox

我试图以两种不同的方式创建一条线。一个是div高度为2px和背景(红色)。另一个是带有2px顶部边框(蓝色)的div。这是测试代码:



.line {
  display: inline-block;
  vertical-align: top;
  width: 50px;
}

.height-line {
  height: 2px;
  background: red;
}

.border-line {
  border-top: 2px solid blue;
}

<div class="line height-line"></div>
<div class="line border-line"></div>
&#13;
&#13;
&#13;

这些 显示相同,但​​在Chrome中,您可以看到左侧div显示比右侧div厚1px。在Firefox中,当您慢慢改变浏览器窗口的高度时,您可以看到高度在3px和2px之间波动(您实际上需要查看equivalent jsfiddle here才能在Firefox中看到此行为 - 我认为b / c显示嵌入stackoverflow片段的方式,它不会发生。)

注意:我的缩放设置已正确设置为100%,并且我已在其他开发者的浏览器中验证了相同的行为。我在Windows 7上使用Chrome版本57.0.2987.133。这是一个截图:

enter image description here

这里发生了什么?

1 个答案:

答案 0 :(得分:0)

这可能是浏览器错误,受Windows的显示比例因素影响。默认显示比例因子为125%。打开资源管理器窗口并转到“控制面板\所有控制面板项目\显示”,然后将显示更改为“更小 - 100%”,然后重新启动计算机:

enter image description here

问题应该消失。