在Chrome响应模式下，块元素之间添加了一个像素

Question

在Chrome响应模式下测试网站响应能力时，无处不在的元素之间会增加1px。这在Firefox上看起来都不错，但在Chrome上，在响应断点上有1px，可以通过添加-1px负边距来修复。

它从何而来？

可以通过将任何块元素堆叠在另一个下面并以Chrome响应模式检出页面来重现该问题。

例如，以下代码段：

html,
body {
  margin: 0 auto;
}

div {
  background: purple;
  height: 200px;
}

<div>One</div>
<div>Two</div>

在正常模式下查看时看起来很不错，但是在Chrome响应模式下查看时，我们会输出以下图片：

您可以看到两个div元素之间的细微白线，它们没有粘在一起但相距1px。知道为什么只在Chrome浏览器上发生这种情况？

Answer 1

这就是抗锯齿的工作原理。当您的div以100％比例显示时，它的高度始终为200px。顶部div的最后一行像素将完全不透明，因为底部div的第一行像素也是如此。

当以不同比例显示时（因为您正在模拟另一个设备或放大/缩小），如果div的高度产生小数像素，Chrome会渲染一个半透明像素，从每个像素获取透明图层divs，根据限制的位置。

但是，两个透明胶片不会使其不透明！因此，因为背景是白色的，所以该像素线略微更亮。

为了防止这种行为，您可以添加

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

在页面的<head>标记中，它禁用了在大量设备上放大/缩小的功能。

更多关于this article中的响应式元标记。

如果你想确保白线永远不会出现，你可以将margin-top: -1px添加到底部，或者将margin-bottom: -1px添加到顶部。我还建议不要禁用放大/缩小，这极大地损害了可用性。

Chrome将永远不会应用负余量来解释这一点，因为它在数学上是不正确的并且会打破其他情况，其中透明度近似非常合适。平心而论，它实际上是子像素渲染的最佳光学近似。