在 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.

的第一行像素也是如此

当以不同的比例显示时（因为您正在模拟另一台设备或因为您 zoom-in/out），如果 div 的高度导致小数像素，则 Chrome 呈现一个半透明像素，它根据限制的位置从每个 div 中获得一个透明层。

但是，两张透明胶片不会使它变得不透明！所以，因为背景是白色，那一行像素点稍微亮一些。

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

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

在您页面的 <head> 标记中，这会禁用在大量设备上 zoom-in/out 的能力。

this article 中有关响应式元标记的更多信息。

如果你想确保白线永远不会出现，你可以在底部添加margin-top: -1px一个或 margin-bottom: -1px 到最上面的一个。我还建议 against 禁用 zoom-in/out，这会极大地损害可用性。

Chrome 将 永远不会 应用负边距来解释这一点，因为它在数学上是不正确的并且会破坏其他透明度近似工作得很好的情况。平心而论，它实际上是亚像素渲染的最佳光学近似。

One pixel added between block elements in Chrome responsive mode