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会渲染一个半透明像素，该像素会从每个div，取决于限制的位置。

但是，两个透明胶片 不要使其不透明 ！因此，由于背景为白色，因此该像素线稍微更亮。

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

<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不会从不应用负利润来解决此问题，因为它在数学上是不正确的，并且会破坏其他情况，在这些情况下，透明性近似非常完美。公平地说，实际上是亚像素渲染的最佳光学近似。