移动端按钮文字偏上因line-height依赖字体度量且android/ios解析中文字体不一致；应禁用默认样式、清除line-height、用flex+box-sizing+vertical-align修复，或改用padding精确控制。
为什么 line-height 在移动端按钮里总偏上
因为 line-height 依赖字体度量（ascent/descent），而 Android 和 iOS 对中文字体、fallback 字体的解析逻辑不同。比如 Android WebView 常按 sans-serif 的英文度量算行高，但实际渲染中文时 ascent 更高，导致视觉上文字“浮”在顶部。这不是你写错了，是浏览器底层排版行为不一致。
-
line-height: 44px+height: 44px在 Chrome 模拟器里看起来正常，真机（尤其低端安卓）大概率偏上 2–4px - 哪怕单位换成
rem或em，只要用了line-height，这个偏差就还在 - 一旦按钮内容变成两行（比如“加载中…” → “加载失败，请重试”），
line-height直接失效，文字贴顶
Flex 布局怎么写才真正生效
关键不是“加了 display: flex”，而是清除所有干扰项。很多项目写了 align-items: center 却没效果，问题出在默认样式残留上。
- 必须设
display: flex+justify-content: center+align-items: center—— 少一个都不行 - 删掉所有显式
line-height，包括继承来的（可加line-height: normal强制重置） - 用
box-sizing: border-box，避免padding撑出容器高度 - iOS Safari 会偷偷给
<button></button>加vertical-align: baseline，得手动覆盖：vertical-align: middle
移动端 button 元素的特殊坑
<button></button> 不是普通 div，它的 UA 样式在各平台差异极大。iOS 15+ 甚至注入隐式内边距和基线对齐，直接破坏 Flex 居中。
- 优先用
-webkit-appearance: none干掉默认样式，再手动补border和background - 别用
<input type="button">，它内部渲染机制更封闭，display: flex支持差 - 如果按钮里嵌了
<img>或图标字体，确认它们没触发基线对齐（加vertical-align: middle或设为flex子项） - Android 旧 Webview（如 Crosswalk）对
button的flex支持不稳定，真要兼容可降级为div+role="button"
什么时候该放弃 Flex 改用 padding
不是 Flex 不好，而是有些场景它反而增加不确定性：首屏渲染极敏感、需支持 Android 4.4 WebView、或按钮高度必须像素级精确（比如和原生 App 对齐）。
- 用
padding-top和padding-bottom手动调，比如font-size: 16px时试padding: 7px 12px，比靠line-height更可控 - 配合
border-radius使用时，圆角值 ≥font-size/2 + padding-top才不会切字 - 这种方案不需要容器高度，也不怕换行，适合 CMS 动态内容
serif）计算布局，等中文字体加载完才重排，造成“闪动式居中”。加 font-display: swap 或预加载关键字体能缓解，但这和 Flex 写法本身无关。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
