ios safari 中 line-height 偏上是因用英文度量渲染中文字体，导致 ascent 过高；button 默认 baseline 对齐、-webkit-text-size-adjust 放大及 line-height 无法响应式缩放均使其失效；应改用 flex 居中（需完整三属性+明确高度+清除 line-height 干扰）或 padding 控制。
为什么 line-height 在 iOS Safari 里总偏上 2–4px
这不是你 line-height 写错了，是 Safari（尤其 iOS 15+）用英文字体度量渲染中文字体：它优先读取 PingFang SC 或 -apple-system 的 ascent/descent 字段，而这些字段为英文设计，中文实际渲染时 ascent 更高，文字就“浮”起来了。再加上：<button></button> 隐式带 vertical-align: baseline，-webkit-text-size-adjust: auto 对小字号强制放大，行高重算直接失准。
放弃 line-height 居中的三个明确信号
只要出现以下任一情况，line-height 就不该再用：
-
<button></button>里混了<svg></svg>或<img>—— 它们默认vertical-align: baseline，会把整行拉高 - 用了
font-size: clamp(1rem, 2.5vw, 1.25rem)或其他响应式字号 ——line-height无法同步缩放 - 父容器是
display: flex或display: grid—— 此时line-height对子元素垂直对齐完全无效
必须写的三行 Flex 居中代码
只写 display: flex 不生效，Safari 要求显式、完整、无干扰：
- 父容器加
display: flex; justify-content: center; align-items: center;—— 少一个都不行 - 父容器必须有明确高度：
height、min-height，或被上下文撑开（不能是height: auto） - 清除所有
line-height干扰：line-height: normal写在父容器上，防止继承或 UA 样式污染 - 对
<button></button>额外加：-webkit-appearance: none; vertical-align: middle;
比 Flex 更稳的 fallback：用 padding
当首屏 LCP 极敏感、需兼容 iOS 14 或 Android 4.4 WebView、或按钮高度必须像素级对齐原生 App（如 height: 44px）时，padding 比 Flex 更可控：
-
padding: 7px 12px（对应font-size: 16px），配合box-sizing: border-box和height: auto - 不依赖字体度量，不受换行影响，也不吃
vertical-align的亏 - 动态文案、多语言、CMS 场景下表现最一致
真正卡住那 1px 的，从来不是代码没写全，而是 Safari 默认行为：UA 样式清不净、-webkit-text-size-adjust 默认开着、<button></button> 的基线对齐逻辑藏得深——别信“写了 Flex 就完事”，每一处默认值都得手动覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
