html - 在 Chrome 响应模式下 block 元素之间添加一个像素

在 Chrome 响应模式下测试网站响应能力时，元素之间无缘无故地添加了 1px。在 Firefox 上看起来一切都很好，但在 Chrome 上，在响应断点上有 1px，可以通过添加 -1px 负边距顶部来修复。

它从哪里来？

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

例如，下面的片段:

html,
body {
  margin: 0 auto;
}

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

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

在正常模式下查看时看起来一切正常，但在 Chrome 响应模式下查看时，假设将输出以下图像:

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

最佳答案

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

当以不同比例显示时(因为您正在模拟另一台设备或因为您放大/缩小)，如果 div 的高度导致小数像素，Chrome 会呈现一个半透明像素，它从每个div，根据limit的位置。

但是，两个透明胶片不会使其不透明!因此，因为背景是白色，那一行像素稍微亮一些。

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

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

关于html - 在 Chrome 响应模式下 block 元素之间添加一个像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54873366/