line-height异常求助：单台设备div高度49.6px而非预期50px

嗨，这个问题我碰到过不少次，核心原因是非100%缩放比例下的小数像素渲染差异——那台电脑大概率是系统显示缩放或浏览器缩放设置成了非整数倍（比如90%、125%），导致25px的行高被浏览器计算成了24.8px，两行叠加后就出现了49.6px的异常高度。下面给你几个靠谱的修复方案：

方案1：强制固定高度（最稳妥） #

直接给span设置固定高度，同时保持每行的行高，让元素高度锁定为整数像素：

span {
  display: inline-block; /* 让height属性生效 */
  height: 50px; /* 对应两行25px的总高度 */
  line-height: 25px; /* 维持每行文字的垂直居中 */
  text-align: center; /* 让换行后的文字居中对齐 */
}

如果div的高度还是有问题，可以给div也加上height: 50px;，彻底锁定容器高度，不受浏览器渲染误差影响。

方案2：调整line-height的计算方式 #

如果不想固定高度，可以尝试把line-height设置为基于字体大小的相对值，避免固定像素带来的渲染偏差：

/* 假设字体大小是14px，用相对比例代替固定像素 */
span {
  font-size: 14px;
  line-height: 1.785; /* 25px / 14px ≈ 1.785，确保行高计算贴合字体 */
}

这个方法更适合需要自适应字体大小的场景，但稳定性不如固定高度方案。

方案3：临时验证问题根源 #

如果只需要快速确认问题，可以让那台电脑的用户检查：

• 系统显示设置：Windows在「设置-系统-显示」、Mac在「系统设置-显示器」里，确保缩放比例为100%；
• 浏览器缩放：按下Ctrl+0（Windows）或Cmd+0（Mac）重置浏览器缩放为默认100%。

这个方法能快速验证问题，但无法从代码层面覆盖所有用户的潜在场景，所以还是推荐方案1作为最终修复。

内容的提问来源于stack exchange，提问作者柯沛瑜