关于Input在手机端光标不垂直居中的问题,网上的一些资料是这么解释的:
在Chrome浏览器中,当设置了line-height时,input无文字,光标高度与line-height一致;input有文字,光标高度从input顶部到文字底部。当没有设置line-height时,则是与font-size一致。
下面用demo来做个测试。
设计一个line-height为3.4rem的输入框。在PC页面上我们只需要直接写line-height:3.4rem便可实现。
在移动端如果只设置line-height:3.4rem,是这样的:
修复后:
修复方法:
1. 设置line-height与字体大小一样的值
2. 利用padding的上下边距将文字和光标居中(demo中line-height原本期望值为3.4, 用3.4-1.4的字体大小,得到的2在对半分就是内边距的数值了)