关于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在对半分就是内边距的数值了）
关于Input在手机端光标不垂直居中的问题，网上的一些资料是这么解释的： 在Chrome浏览器中，当设置了line...
如何解决input输入框在ios中光标及字体不居中的问题；问题根本：不要使用line-height垂直居中。解决方...
如何解决input输入框在ios中光标及字体不居中的问题；问题根本：不要使用line-height垂直居中。解决方...
在iPhone的Safari中发现了这个问题，line-height 属性不能使input输入框中的光标垂直居中，...
ie 下input光标位置垂直不居中问题 input输入框用一个背景图模拟，设置height和line-heigh...
iOS上面输入框光标和字体无法居中 如何解决input输入框在ios中光标及字体不居中的问题；问题根本：不要使用l...
居中 行内元素水平居中 文字相对图片、输入框垂直居中 块元素水平居中 单行文字垂直居中 更灵活的布局方式当然是建议...
移动端input placeholder垂直不居中。移动端输入框的placeholder文字仔细看并非完全垂直居中...
1.input输入框文字靠右垂直居中。 2.placehoder提示同样靠右垂直居中。(placeholder是H...
css页面布局水平垂直居中问题 居中问题
本文标题：【重构笔记Vol.2】H5页面输入框光标垂直居中
本文链接：https://www.haomeiwen.com/subject/hrpilttx.html
网友评论