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

Question

我试图以两种不同的方式创建一条线。 一个是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> 

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

注意：我的缩放正确设置为100％，我在其他开发人员的浏览器中验证了相同的行为。 我在使用Chrome版本57.0.2987.133的Windows 7上。 这是一个截图：

这里发生了什么？

Answer 1

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

那个问题就应该消失了。