line-height 渲染不一致的根本原因是浏览器对字体度量、基线对齐及 ios 缩放机制的处理差异；chrome 按 em-box 对齐，firefox 依赖字体 ascent/descent，safari 还叠加旋转或小字号缩放，导致相同 line-height: 1.6 实际行高相差 1–2px。
为什么 line-height 在 Chrome/Firefox/Safari 里渲染不一致
根本原因不是你写错了 line-height，而是浏览器对字体度量（ascent/descent）、基线对齐策略、甚至 iOS 缩放机制的默认处理不同：Chrome 倾向按 em-box 对齐，Firefox 更依赖字体本身的 ascent/descent，Safari 还会叠加旋转或小字号下的自动缩放。这些底层差异导致同样 line-height: 1.6 在不同环境里实际行框高度可能差 1–2px，单行居中时文字就 visibly 偏上或偏下。
用 normalize.css 统一基准，但必须按顺序加载
normalize.css 不是靠“暴力覆盖”，而是从根上重置排版起点：
- 在
html元素上设line-height: 1.15，作为所有后代计算的锚点 - 禁用 iOS Safari 的自动缩放：
-webkit-text-size-adjust: 100% - 确保
pre、code、textarea显式继承，不依赖浏览器猜测
⚠️ 失效常见原因：
-
normalize.css没放在你自己的 CSS 文件之前——它必须是第一个生效的样式表 - 用了
@import引入，导致异步加载，html的line-height规则晚于页面渲染 - 项目里同时引入了 Ant Design 或 Element Plus，它们自带 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的垂直对齐逻辑
DevTools 里检查 computed styles，确认最终生效的 line-height 和 height 数值真的一致；还要注意父级是否设置了 font-size: 0 或 vertical-align: top，它们会干扰行框计算。
多行文本或动态场景，别硬套 line-height = height
line-height 控制的是每行的行框高度，不是整个文本块在容器中的位置。一旦换行，line-height: 100px 会让每行都撑高 100px，文字堆在顶部，底部大片留白——这不是居中，是碰巧没露馅。
真正可靠的方案是：
- 父容器设
display: flex+align-items: center - 子元素保持默认
display: block，不用设height或line-height - 如果父容器是
flex-direction: column，则改用justify-content: center
flex 方案不依赖内容行数，响应式友好，且现代浏览器支持无死角。唯一要注意的是：别在 flex 子项上额外调 line-height 去“凑”居中效果——那是本末倒置。
最易被忽略的点：行高问题从来不是孤立的，它常和字体 fallback、iOS 缩放、UI 框架的隐式 reset 交织在一起。修一个 line-height 前，先确认你面对的是“单行固定高容器”，还是“多行+响应式+第三方库”的混合现场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
