码迷,mamicode.com
首页 > 其他好文 > 详细

关于input框的兼容性问题

时间:2017-04-05 23:19:22      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:add   isp   ie浏览器   填充   联网   xp系统   用户   line   pad   

在H5横行的移动互联网时代中,兼容性的问题往往被大家所遗忘。可以说微软都已经放弃了IE,自然大家也都不是特别关心这些问题。但是客户却不会这么想,因为使用浏览器,浏览网站的人,太多了,以至于甚至于有人使用xp系统,ie6这样的低端版本。为了给用户更好的体验,我们只有选择迁就。

 

废话说了不少了,下面进入正题。

 

最近在项目中遇到input框的兼容性问题,经过多方实验,最终解决,特地记下来,以备以后查看,同时方便大家解决问题。

 

正常input框的css样式,例如:

input{display:block;padding:0 10px;width:200px;height:40px;}

然后这种样式在ie浏览器下会出现文字上下不居中的问题,怎么解决呢?那就是靠上下padding填充了。

input{display:block;padding:8px 10px;width:200px;height:24px;}

 

这种方式虽然可以解决ie浏览器中input框的兼容性问题,但是这次我在项目中遇到的是safari浏览器的不兼容问题。怎么解决呢?经过查证,实验后,发现设置line-height:100%;可以解决。如下:

input{display:block;padding:0 10px;width:200px;height:40px;line-height:100%;}

 

以上就是input框在各大浏览器中的兼容性总结。如果那里有错误,还请大家指正。

关于input框的兼容性问题

标签:add   isp   ie浏览器   填充   联网   xp系统   用户   line   pad   

原文地址:http://www.cnblogs.com/zhangzhanfeng/p/6671055.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!