line-height 跨浏览器渲染不一致源于各引擎对字体度量和行框对齐策略的实现差异，需组合约束而非单点调整；安全居中需满足 height 像素值、white-space: nowrap、box-sizing: border-box 等全部条件；推荐 flex/grid/table-cell 等不依赖字体度量的替代方案。
line-height 在 Chrome、Firefox、Safari 之间渲染不一致，不是你写错了，而是浏览器对字体度量（ascent/descent）和行框对齐策略的底层实现不同——它无法靠“调一个值”彻底统一，必须组合约束。
为什么 computed line-height 数值一样，文字却偏上偏下
Chrome 倾向按 em-box 高度计算行框；Firefox 更依赖字体自带的 ascent/descent 值；Safari 还可能叠加 iOS 缩放或旋转补偿。结果就是：line-height: 1.6 在三端实际像素高度可能差 1–2px，单行居中时文字 visibly 错位。
更隐蔽的问题是 Web Font 加载完成前后：后备字体（如 sans-serif）和正式字体（如 Inter）的基线位置不同，line-height: 1.4 会突然跳变 2–3px。
- 检查 DevTools 的 Computed 面板，确认最终生效的
line-height和font-size是否真与预期一致 - 用
font-feature-settings: "ss02" 0, "cv05" 0临时关掉字体变体，看是否回归——若恢复，说明是字形轮廓导致的基线偏移 - 避免在按钮或表单控件里只靠
line-height对齐：Firefox 默认把button的line-height强制设为normal !important，你写的值会被忽略
什么时候能安全用 line-height = height 居中
这个技巧只在全部条件满足时才可靠，缺一不可：
-
height必须是明确像素值（不能是auto、min-height或未解析的百分比） - 内容强制单行：
white-space: nowrap（模板字符串里的换行符、长单词都会触发多行） - 盒模型干净：
box-sizing: border-box，且padding和border已计入高度计算（例如height: 40px; padding: 8px;→line-height: 24px，不是40px） - 父容器不能是
display: flex或display: grid——这两种布局下line-height对垂直对齐完全无效 - 容器内不能混用
<img>、<svg></svg>或vertical-align，否则整行基线被拉高
真正跨浏览器稳定的替代方案
别和 line-height 死磕。以下方式不依赖字体度量，也不吃渲染引擎差异的亏：
- 单行/多行都适用：
display: flex; align-items: center;（IE11 需加-ms-flex-align: center;） - 仅限现代浏览器：
display: grid; place-items: center; - 兼容极旧环境（IE9+）：
display: table-cell; vertical-align: middle;，但必须配box-sizing: border-box和显式width/height - 按钮类控件优先用
min-height + padding + line-height组合，而不是固定height：min-height: 36px; padding: 8px 16px; line-height: 20px;
如果用了 normalize.css，确保它加载顺序在你自己的 CSS 之前——否则 html { line-height: 1.15; } 这个锚点规则晚于渲染，就白搭。
按钮和表单控件要特别注意的三件事
原生 button、input[type="text"] 等元素的 line-height 行为最不可靠：
- Firefox 默认 UA 样式里写了
line-height: normal !important，你设的line-height: 40px直接被忽略 - Chrome/Safari 虽支持，但
line-height只影响文字在按钮内部的基线位置，不参与盒模型高度计算——真实高度由height、padding、字体度量共同决定 - 自定义字体（如 SF Pro、Inter）的 ascent 值偏高，文字看起来“上浮”，此时调
line-height无法修正，必须换布局方式
真正让按钮视觉一致的，从来不是单点修复，而是 padding、border、line-height 三者锁定 + box-sizing: border-box 显式声明的组合动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
