ios h5端input文本垂直偏位主因是height与line-height不一致或padding干扰,需统一height和line-height值、禁用上下padding、flex容器中显式设置align-items: center。

直接结论:iOS H5端input文本垂直偏位,90%是line-height和height不一致或padding干扰导致,不是bug,是渲染规则。
为什么iOS下input文本会往上跑
iOS WebKit对input的行内盒模型处理更严格:当height与line-height不相等、或存在上下padding时,文本基线会按内部排版逻辑上浮,而非居中。Android和桌面Chrome则常“宽容”地强制居中,造成跨平台差异。
-
height: 70rpx但line-height: normal→ 文本顶部紧贴内边距,视觉上偏高 - 设了
padding-top: 10rpx却没配padding-bottom→ 垂直中心点偏移 - 父容器用了
flex但没设align-items: center→ input自身未参与对齐
必须同时设置height和line-height
这是最简单也最有效的解法。二者值必须完全一致(单位也要统一),且不能依赖继承或normal。
- 用
rpx或px明确写死,例如:height: 80rpx; line-height: 80rpx; - 避免
line-height: 1.5这类相对值,iOS会按字体大小二次计算,不可控 - 如果用了
font-size: 28rpx,建议height和line-height都设为80rpx(经验高度,适配多数字号)
慎用padding,优先用line-height控制留白
加padding是最容易引发偏位的操作——iOS会把padding算进盒模型,但文本垂直对齐仍基于content box,结果就是“看起来空了一块但文字没下去”。
- 删除所有
padding-top/padding-bottom,只保留padding-left/padding-right - 需要内边距?用
height+line-height撑开空间,再靠text-indent微调起始位置 - 若必须用padding(如带图标输入框),务必
padding-top === padding-bottom,否则基线必然偏移
Flex容器里要显式对齐
哪怕只有一行input,只要父级是display: flex,就必须加align-items: center,否则iOS会忽略input的vertical-align行为。
- 外层
view加style="display: flex; align-items: center;" - input本身加
style="vertical-align: middle;"(虽非必需,但多一层保险) - 避免给input设
margin-top/margin-bottom来“凑高度”,这会破坏flex对齐流
真正麻烦的不是样式怎么写,而是iOS不同版本对input内部盒模型的解析略有出入——比如iOS 16.5之后对line-height: unset的处理就和15.4完全不同。所以别依赖“试出来刚好”,固定height和line-height数值才是唯一稳态解。











