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