line-height: 1.6在Chrome和Firefox中实际行高不一致，因Chrome按em-box对齐、Firefox依赖字体ascent/descent，差值常达1–2px；修复关键在于统一计算起点：用normalize.css设html的line-height为1.15并确保其加载优先，禁用@import，避免UI库覆盖，同时添加-webkit-text-size-adjust: 100%防iOS缩放。
直接设 line-height: 1.6 在 Chrome 和 Firefox 里实际行高不一致，不是你写错了，是浏览器对字体度量（ascent/descent）和行框计算逻辑不同导致的——Chrome 倾向按 em-box 对齐，Firefox 更依赖字体自身指标，差值常达 1–2px。修复关键不在“调数值”，而在控制计算起点和消除干扰项。
用 normalize.css 锚定根级 line-height，但必须加载顺序正确
normalize.css 的作用不是覆盖样式，而是把 html 元素的 line-height 设为 1.15，作为所有后代计算的基准。这个值被选中是因为它在主流字体下能稳定触发一致的行盒高度。
- 必须把 normalize.css 放在你所有自定义 CSS 文件之前，否则
html上的line-height规则晚于页面渲染，失效 - 禁用
@import引入 normalize.css，它会异步加载，无法保证优先级 - 检查是否和 Ant Design、Element Plus 等 UI 库共存——它们自带 reset，可能悄悄覆盖
body的line-height，需手动补回或调整加载顺序
单行垂直居中时，line-height = height 不总可靠
这个技巧只在三个硬性条件同时满足时才成立，缺一不可：
- 容器
height必须是明确像素值（不能是auto、min-height或未解析的百分比） - 必须加
white-space: nowrap，否则模板字符串里的换行符、长单词会触发多行，破坏单行假设 - 若容器有
padding或border，line-height应等于内容区高度（例如height: 40px; padding: 8px;→line-height: 24px） - 别和
display: flex或display: table-cell同时用——这些 display 类型会忽略line-height的垂直对齐逻辑
查 computed styles 时重点看这三项
DevTools 里光看声明不够，要确认最终生效值是否真的一致：
立即学习“前端免费学习笔记（深入）”；
- 检查 computed
line-height和height数值是否完全相等（注意单位，normal或无单位数字需换算） - 留意父级是否设置了
font-size: 0或vertical-align: top，它们会干扰当前元素的行框计算 - 在 Firefox 中右键元素 → “Inspect Accessibility Properties”，看是否意外启用了基线对齐上下文
最易被忽略的是：iOS Safari 会对小字号自动缩放，哪怕你写了 line-height: 1.6，它也可能先缩放字体再计算行高。所以必须加 -webkit-text-size-adjust: 100%，且这条规则要落在 html 或 body 上才有效。
