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