微构网络

在安卓等移动浏览器中placeholder中的文字不垂直居中问题

2015-07-11 18:25 栏目:技术教程 查看(24,626)

现在移动互联网的浪潮一波又一波,很多企业和个人都开始注重自己的移动互联网(当然很多是已经有了传统的PC端的东西),比如我们最近接的很多项目都是传统PC和移动端同步做的,这也说明了移动端在用户心目中的重要性。

大家也清楚,因为很多移动设备上的浏览器都是一些现代浏览器,对HTML5和CSS3等新标准有着比PC上的一些老版本浏览器更好的支持,因此H5等技术标准也因此遍地开花。

而今天我们要讲的一个问题就是:在安卓等移动浏览器中placeholder中的文字不垂直居中问题;首先我们开看看具体的问题是什么,来看一张对比图片。(左边是Chrome调试的效果,也就是说在Chrome是没有问题的;右边是在一台安卓手机的浏览器中的效果 )。

xxd

 

通过上图可以发现,右边的明显有问题,也就是没有达到我们预期的效果,我们要的是里面文字垂直居中,而这里却没有;总之,就是出了异常问题了。

其实这就是行距line-height造成的,我们一般来美化input会用height、padding、line-height等属性,但这里如果用了line-height就会造成这种异常。可以用padding等属性来实现我们想要的效果,这里就是这么处理这个问题的。

我们来了解下placeholder,这是一个HTML5中新增加的一个属性,placeholder 属性提供可描述输入字段预期值的提示信息(hint)。 该提示会在输入字段为空时显示,并会在字段获得焦点时消失。placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。其实说白了,这里就可以替代我们在HTML5版本以前的时候我们使用JS来实现的一些效果。

转载请注明出处:在安卓等移动浏览器中placeholder中的文字不垂直居中问题 - 微构网络
分享:

您可能遇到的问题?

搜索微构网络的干货:

值班:15574303608 业务:在线咨询 技术:在线咨询

电话:0731-83862683 售后:在线咨询 邮箱:server@csweigou.com

地址:长沙市五一西路锦绣中环1116(五一广场平和堂对面)