为什么 2px 边框在 Firefox 和 Chrome 中呈现高于 2px 高度？

Question

我正在尝试以 2 种不同的方式创建一条线。一种是高度为 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 的显示嵌入stackoverflow sn-p的方式，它不会发生）。

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

这是怎么回事？

Answer 1

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

问题应该就解决了。