html+placeholder+兼容问题,HTML5 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;

}

修改某个标签

//code from http://caibaojian.com/html5-placeholder-discuzz.html

//code from http://caibaojian.com/html5-placeholder-discuzz.html

//code from http://caibaojian.com/html5-placeholder-discuzz.html

#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

在Android自带浏览器、百度手机浏览器、小米自带浏览器上出现图一的问题(占位符靠顶部)。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/18062.html

微信打赏

支付宝打赏

感谢您对作者Rangoon的打赏，我们会更加努力！    如果您想成为作者，请点我