html - 为什么 2px 边框在 Firefox 和 Chrome 中渲染得比 2px 高度高？

Question

我正在尝试以两种不同的方式创建一条线。一个是带有高度为 2px 和背景(红色)的 div。另一个是带有 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>

这些应该看起来是一样的，但是在 Chrome 中，您可以看到左边的 div 看起来比右边的 div 厚 1px。在 Firefox 中，当你慢慢改变浏览器窗口的高度时，你可以看到高度在 3px 和 2px 之间波动(你实际上需要查看 equivalent jsfiddle here 才能在 Firefox 中看到这种行为 - 我认为 b/c of显示嵌入 stackoverflow 片段的方式不会发生)。

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

这是怎么回事？

Answer 1

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

问题应该消失了。