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

2015-07-11 18:25 栏目:技术开发 查看(33418)

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

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

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

xxd

 

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

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

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

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:在安卓等移动浏览器中placeholder中的文字不垂直居中问题 - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 581| 784| 189| 364| 858| 100| 208| 603| 940| 115|