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

当在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浏览器上会发生这种情况吗？

最佳答案

这就是抗锯齿的工作方式.当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绝不会应用负边距来解决此问题,因为它在数学上是不正确的,并且会破坏其他情况(在这种情况下,透明度近似非常好).公平地说,它实际上是亚像素渲染的最佳光学近似.

原文地址：https://www.jb51.cc/html/530433.html