line-height 在安卓上偏上是因浏览器用英文字体度量计算中文行高，设 line-height: normal 可解决；推荐用 padding 或 flex 布局替代 line-height 控制高度。
line-height 在安卓上偏上不是你写错了，是浏览器按英文度量算中文行高，直接设 line-height: normal 就能破局。
为什么 line-height: 44px 在安卓真机上总偏上
Android WebView（尤其旧版）默认用 sans-serif 的英文字体度量（ascent/descent）计算行高，但实际渲染中文字体时 ascent 更高，导致文字视觉上“浮”在顶部。哪怕你设了 height: 44px 和 line-height: 44px，偏差仍稳定在 2–4px；换成 rem 或 em 也无效——根源不在单位，而在底层排版逻辑。
常见错误现象：
- Chrome 模拟器里居中，一上安卓真机就明显上移
- 按钮文字从单行变两行（如“加载中…”→“加载失败，请重试”），
line-height完全失效，文字贴顶 - 加了
vertical-align: middle没反应——因为<button></button>的 UA 样式在 Android 上会偷偷覆盖它
最简解法：line-height: normal + padding
不用 Flex、不改结构，适合快速修复已有按钮或 <a></a> 标签。核心是放弃用 line-height 控制高度，改用 padding 精确撑开内容区。
- 必须清除所有
line-height值，包括继承来的，写死line-height: normal -
height改为height: auto，避免和padding冲突 -
padding-top和padding-bottom之和 ≈ 原来的容器高度（例如原height: 32px，可试padding: 7px 0） - 注意：这个
7px不是通用值，要按实际字号微调——14px 字号常配 6–8px，12px 字号可能需 9–10px
更健壮的解法：Flex 布局 + 清除 UA 干扰
适合新项目或可重构组件。Flex 能绕过所有 line-height 排版陷阱，但必须干掉浏览器默认样式干扰，否则 align-items: center 会静默失效。
- 父元素设
display: flex、justify-content: center、align-items: center—— 少一个都不行 - 显式重置
line-height: normal，防止子元素继承异常值 - 给
<button></button>加vertical-align: middle（iOS Safari 默认塞了baseline） - 务必加
box-sizing: border-box，避免padding或border撑出容器 - 慎用
transform: scale()方案——虽能骗过渲染，但会模糊文字且影响点击热区
哪些场景千万别碰 line-height = height
这个模式在安卓上本质不可靠，以下情况必须换方案：
- 按钮内文字可能换行（如多语言支持、动态文案）
- 字号
（Android WebView 会强制按 12px 渲染，<code>line-height失效） - 使用自定义字体（fallback 字体链在各机型解析差异更大）
- 嵌套在
<table> 或 <code>display: table-cell里（基线对齐叠加 UA 样式，偏移放大）真正麻烦的不是写错代码，而是你改了
line-height却没意识到：安卓根本没按你写的算。先清line-height: normal，再选padding或flex，比反复调数值快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
