首页 > 代码库 > 关于input框的兼容性问题

关于input框的兼容性问题

在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框的兼容性问题