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

Question

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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。这是一个截图：

这里发生了什么？

Answer 1

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

问题应该消失。