应避免使用百分比line-height，因其计算值固化继承、不随子元素字号缩放，易致文字截断或错位；推荐统一用无单位数值如1.4，确保响应式与无障碍场景下自适应。
line-height设为百分比（如150%）时文字被截断或错位
百分比值在 line-height 中不是“相对于父元素高度”，而是相对于当前元素的 font-size —— 但它的计算方式和无单位数值不同：它会先计算出具体像素值，然后**固定继承给子元素**，不再随子元素字号变化而缩放。
常见错误现象：
- 父元素
font-size: 16px; line-height: 150%→ 计算得24px - 子元素
font-size: 24px，但line-height仍继承24px（不是36px），导致行距过小、文字上下贴边甚至被裁掉 - 中文字体在 iOS Safari 或 Chrome 移动端上，因 ascent 值偏高，
line-height: 150%看似够用，实则顶部留白不足，文字视觉“上浮”
使用场景中要特别注意：line-height: 150% 和 line-height: 1.5 表面等效，但前者是“计算后固化”，后者是“每次动态重算”。响应式页面、字体大小可变组件（如主题切换、无障碍缩放）中，百分比极易引发错配。
为什么 line-height: 200% 在按钮里完全没反应
表单控件（button、input[type="submit"]）对 line-height 的支持极差。Firefox 和旧版 Edge 直接在 UA 样式中写死 line-height: normal !important，你写的 line-height: 200% 会被无视；Chrome/Safari 虽然解析该值，但仅用于调整文字基线位置，不改变按钮整体高度。
真实高度由以下组合决定：
- 显式
height（优先级最高） - 未设
height时：2×padding+font-size+ 浏览器根据字体度量自动预留的余量（非line-height） -
box-sizing类型：若为content-box（默认），padding和border会额外叠加
所以你在 button 上写 line-height: 200%，DevTools 里可能看到 computed 值确实是 32px（假设 font-size: 16px），但它既不撑开按钮，也不让文字垂直居中——因为按钮内部行框（line box）的渲染逻辑被 UA 强制隔离了。
百分比 line-height 在 flex 容器中引发文字偏移
当父容器是 display: flex，且子元素含文本时，line-height: 180% 这类值容易和 align-items: center 冲突。原因在于：line-height 控制的是行框高度，而 flex 的垂直对齐依据是基线（baseline）或交叉轴中心，二者不联动。
典型表现：
- 文字看起来“卡在顶部”，下方留大片空白
- 鼠标悬停触发 height 动画时，因
line-height计算值含小数（如19.5px），渲染引擎反复重绘导致抖动 - 移动端 Safari 尤其明显：中文字体 ascent 解析偏差 +
vertical-align: baseline隐式生效，line-height: 180%反而放大偏移
此时不要调百分比值，改用 display: flex; align-items: center; justify-content: center; 包裹文字，或直接用 padding 控制视觉高度更可靠。
什么时候必须避免用百分比，改用无单位数值
几乎所有需要继承、缩放、响应式的场景，百分比都是次选。真正安全的做法是统一用无单位数字，比如 line-height: 1.4。
必须换的理由：
-
line-height: 140%和line-height: 1.4在初始渲染时效果一样，但前者在子元素font-size改变后无法自适应，后者会重新计算 - 使用 CSS 自定义属性（
--text-line-height: 1.4）时，百分比无法参与 calc() 运算，无单位值可以（如calc(var(--text-line-height) * 1em)） - 中文排版建议下限是
1.2，混合英文/图标至少1.35—— 这些都是比例关系，不是绝对像素，用百分比反而增加心智负担
复杂点在于：很多团队沿用旧项目里的 150% 写法，以为“更明确”，结果在 font-size 动态调整、第三方组件嵌套、无障碍缩放等真实场景中陆续暴雷。它不报错，只是悄悄让文字变得难读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
