安卓手机和苹果手机 placeholder 不垂直居中的问题

Question

在现等待，该如何解决

    height: 54px;

    line-height: 54px;

苹果手机placeholder正常垂直居中，安卓手机偏上

苹果手机光标不正常

Answer 1

这个问题，可以通过改变布局思路来解决，div模拟40像素高的输入框，子元素input高度与字体大小相同，背景透明无边框，此时输入文字和placeholder提示文字都可以显示在中间的位置，并且安卓手机、苹果手机和电脑以及正常的pc浏览器都不会出现上偏下移的问题。优化问题：只有在点击到input时才会有光标，才能输入，此时可以为div做点击事件为input获取光标，即可完美模拟input输入框。