关于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框在各大浏览器中的兼容性总结。如果那里有错误，还请大家指正。

转载于:https://www.cnblogs.com/zhangzhanfeng/p/6671055.html