android浏览器中文字偏上是因底层字体度量被错误计算：webkit按英文字体ascent/descent解析line-height，而中文字形实际更高，导致文字“顶”在行框上方，尤其font-size
Android浏览器对中文字体的垂直度量处理和iOS、桌面端不一致，直接导致文字视觉上“飘”在容器顶部——这不是你的line-height写错了，也不是flex没配好，而是底层字体度量（ascent/descent）被错误计算所致。
为什么line-height设成和height一样也偏上？
Android WebKit（尤其4.4–7.x）在解析line-height时，会参考系统默认英文字体的度量值，而非实际渲染的中文字体。当中文 fallback 到 sans-serif 且未显式指定中文字体族时，浏览器按英文基线（baseline）+ ascent 计算行框高度，但中文字符实际字身更高、上伸部更长，结果就是文字整体“顶”在行框上方。
常见现象包括：
-
font-size: 11px时偏移最明显（奇数+小于12px双重触发） - 用
vertical-align: middle或table-cell均无效 - 即使
line-height: normal，在部分 Android 6.x WebView 中仍偏上
用lang属性强制中文字体渲染路径
给 加 lang="zh-CN" 是成本最低、兼容性最好的起点。它能触发 Blink 内核的中文字体 fallback 逻辑，让浏览器优先匹配系统中文字体（如 Noto Sans CJK），从而使用正确的 ascent/descent 值。
配合以下 CSS 更稳妥：
html[lang="zh-CN"] {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans CJK SC", sans-serif;
}
注意：lang="zh-cmn-Hans" 在 Android 7.0+ 更可靠；MIUI 设备可试 font-family: miui。
避免踩坑的字体与尺寸组合
不是所有字号都安全。Android 对小字号的像素截断和 baseline 对齐极不友好：
- 禁用奇数字号：如
font-size: 13px→ 改为14px或16px - 低于
12px基本放弃原生居中，必须缩放：先设font-size: 24px，再用transform: scale(0.5)+transform-origin: 0 0 - 慎用
line-height: 1：它会让行框高度等于 font-size，但 Android 下中文字形常超出该范围，反而加剧偏上 - 替代方案：用
padding控高 +text-align: center，比依赖line-height更可控
Flex 居中为何有时还偏上？
当父容器是 display: flex，子元素是 <a></a> 或 <span></span> 这类 inline 元素时，align-items: center 的基准仍是 inline box 的 baseline，而非文字本身。此时需确保子元素是块级：
a {
display: block;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
line-height: normal; /* 关键：重置行内格式化上下文 */
}
另外，某些 Android 定制 ROM（如 EMUI 12）会忽略 align-items 的 sub-pixel 计算，建议加 margin-top: -1px 微调——这不是 hack，而是真实设备渲染残留的 0.5px 对齐误差。
真正难处理的不是单个按钮，而是混合中英文、动态字号、多语言切换的场景。此时 lang + 字体栈 + 尺寸约束三者缺一不可，任何一项缺失都可能让文字在某台红米或vivo上突然“浮”起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
