HTML5 placeholder兼容性探讨

关于HTML5占位符placeholder的文章,之前发表过几篇:

  1. placeholder占位符兼容性及拓展
  2. 修改placeholder(css3表单填充)颜色
  3. javascript兼容placeholder代码

我们了解到placeholder不支持IE10以下的浏览器,关于兼容性问题你可以到canIUse上了解。

目前的写法是这样子的:

修改所有的input placeholder

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/* Firefox 18- */
  color: red;
}
::-moz-placeholder{/* Firefox 19+ */
 color: red;
}
:-ms-input-placeholder {
  color: red;
}

修改某个标签

#myInput::-webkit-input-placeholder {
  color: red;
}
#myInput:-moz-placeholder {
  color: red;
}
#myInput:-ms-input-placeholder {
  color: red;
}

但是placeholder并不支持padding和height值,在Android手机原生浏览器里面如果设置了line-height的值,比如设为line-height:32px

zOkOt ZEjdo

在Android自带浏览器、百度手机浏览器、小米自带浏览器上出现图一的问题(占位符靠顶部)。uc/qq正常(图二)。谷歌找不到,于是我到stackoverflow找到了这个答案:HTML5 placeholder css padding,果然还是这个网站上才能找到东西。

里面说到把line-height设置为line-height:normal(或者不设置行高问题,只设置padding即可).立马就行了。不过国内倒是没人提到这点,很奇怪,难道是没有人去注意还是不知道怎么解决。

关于HTML5表单的支持程度请看下面链接:

HTML5 inputs and attribute support page

演示(扫描下面二维码)在百度手机浏览器打开:

input-line-height

最近做的一个活动页面,欢迎扫码围观

xinlian-app

原创文章:HTML5 placeholder兼容性探讨 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/html5-placeholder-discuzz.html)
评论已关闭。

“HTML5 placeholder兼容性探讨”有2个评论

  1. wnow20

    我现在在看 bootstrap 3,它还是设置了 line-height 。但是在那些 placeholder 出问题的手机里面,它还是看是居中的。

    ¥ 打赏 赞(0)
    登录回复
    • 前端博客

      bootstrap里面的line-height设置是跟浏览器差不多的哦,一般是23像素左右。

      登录回复