flex子项设line-height会偏移，因它不控制对齐却撑大行框，干扰align-items:center的基准；inline元素、未声明display的p标签、含svg/img的按钮最危险；Safari更敏感，易受UA默认line-height和text-size-adjust影响；应加display:block、重置line-height、清除vertical-align来彻底禁用。
flex子项设了line-height，为什么文字会偏移？
因为 line-height 在 flex 容器中不控制对齐，但它会撑大子元素的行框（line box），进而干扰 align-items: center 的计算基准——尤其当子项是 inline 或 inline-block 时，浏览器先按行高生成内联上下文，再套进 flex 对齐逻辑，结果就是“中心”算歪了。
哪些子项类型最危险？
以下三类元素加 line-height 后极易出偏移：
-
<span>、<a>等默认display: inline元素——它们天然参与行框构建，line-height直接生效 - 未显式声明
display: block的<p>或自定义标签——某些 UA 样式会让它保留部分内联特性 - 含
svg、img或图标字体的按钮——这些元素默认vertical-align: baseline，和line-height联动后整行基线被拉高
为什么 Safari 特别容易跳动？
Safari（尤其是 iOS 15+）对 line-height 的处理更敏感：
- 继承 UA 默认的
line-height: normal（约 1.2），哪怕你没写，也可能被激活 - 遇到
font-size小于 16px 时触发-webkit-text-size-adjust，重算行高导致 1–2px 跳动 - 当
flex和line-height共存，且子项是inline时，旧版 Safari 会优先按行框中心而非容器交叉轴中心对齐
怎么彻底关掉这个干扰？
不是调小 line-height，而是切断它起作用的路径：
立即学习“前端免费学习笔记（深入）”；
- 给 flex 子项加
display: block（或display: flex），让它脱离行框上下文 - 显式重置
line-height: 1或line-height: normal，避免继承 UA 值 - 清除所有
vertical-align（包括父容器和子元素上写的） - 若子项含图标，统一用
display: flex包裹文字和图标，而不是靠line-height拉齐
line-height 还在悄悄参与布局计算。只要子项没脱离内联流，它就还在影响基线位置。 
