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 不总可靠

这个技巧只在三个硬性条件同时满足时才成立，缺一不可：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 容器 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 上才有效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！