外层div较内层span多出1像素的问题排查与解决

将文本包裹在span标签内并嵌入div中，为div设置红色背景、span设置黄色背景后，在100%缩放比例下，div底部比span多出1像素；50%缩放时该现象消失，200%缩放时顶部也会出现多余像素。相关代码如下：

<style>
  div {
    background-color: red;
  }
  
  span {
    background-color: yellow;
  }
</style>

<div>
  <span>Some text</span>
</div>

• 这是浏览器像素渲染精度偏差导致的问题：当页面缩放比例触发浏览器对元素尺寸进行非整数像素计算时，div（块级元素）和span（行内元素）的渲染取整逻辑不一致。
• span作为行内元素，默认基于字体基线对齐，其高度由字体行高、基线位置等属性决定；div作为块级元素，高度由内部内容撑开。浏览器在处理小数像素的取整渲染时，两类元素的像素对齐规则存在差异，最终导致缝隙出现。

以下几种方案可消除该现象：

1. 将span转为块级元素：让span和div的渲染规则统一，消除行内元素的基线对齐差异：

<style>
  div {
    background-color: red;
  }
  
  span {
    background-color: yellow;
    display: block;
  }
</style>

2. 统一行高与垂直对齐方式：给div和span设置相同的行高，同时让span的垂直对齐与容器匹配，避免基线偏移导致的高度差：

<style>
  div {
    background-color: red;
    line-height: 1.2;
  }
  
  span {
    background-color: yellow;
    line-height: inherit;
    vertical-align: top;
  }
</style>

3. 给div添加overflow:hidden：通过截断容器内的溢出像素，消除偏差带来的缝隙：

<style>
  div {
    background-color: red;
    overflow: hidden;
  }
  
  span {
    background-color: yellow;
  }
</style>

4. 显式设置一致的高度：若文本尺寸固定，可给div和span设置相同的固定高度，强制尺寸匹配：

<style>
  div {
    background-color: red;
    height: 20px;
  }
  
  span {
    background-color: yellow;
    display: inline-block;
    height: 100%;
  }
</style>

内容的提问来源于stack exchange，提问作者Denys_newbie