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

在现等待,该如何解决

    height: 54px;
    line-height: 54px;

苹果手机placeholder正常垂直居中,安卓手机偏上
苹果手机光标不正常

阅读 3.2k
2 个回答

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

你这类情况已经很普遍了,移动端placeholder不能垂直居中,主要原因是line-height在移动端确实不怎么样,居中效果并不好,改为padding才好了些。但是padding也仅仅是好一点,对有些强迫症的人还是不能忍受。这是我自己处理这个问题的方法,http://www.cnblogs.com/zjzhom...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题