表单input按钮在各浏览器之间的兼容性

从网上看了这篇关于表单input按钮的浏览器兼容性问题，总结的还不错，因此copy下来学习下。

input按钮在各个浏览器之间的兼容性问题,看下边这段代码：

input.item {

background: #4D90FE;

border: 1px solid #4D90BB;

color: white;

}

<input type="submit" value="提交" />

这是很简单的一个input提交按钮，它在各大浏览器中的状况以下：

很明显，咱们会看到它在每一个浏览器中的效果都是长短不一，良莠不齐的，哪一个是标准的也很差说。

如今咱们来对他进行一个修正，我用的修正样式以下：

.item input {

background:#4D90FE;

border:1px solid #4D90BB;

color:white;

font-family:Arial,sans-serif,Tahoma; 规定同一字体

font-size:12px; 规定同一字体大小

height:25px; 解决Safari和Chrome下的高度问题

line-height:15px; 协调height，让文字居中

overflow:visible; 只有设置这个属性IE下padding才能生效

padding:0 0.5em; chrome、ff默认值；调整其值，让IE和其余浏览器的同样

}

后面有注释的六行就是后来添加的。咱们从上图能够看到，chrome下高度”有问题”，不符合咱们的预期。

经测试，firefox下给input设置line-height值是无效的。

这应该是firefox中已经给input标签的line- height值定死了，那就只有从height和padding入手了。

经测试，firefox和chrome下，input中padding都有一个默认值padding:0 0.5em;

当咱们将padding调至此默认值时发现IE下的input按钮的高度有了变化。

再通过height与line-height协调，最终修复的input按钮效果以下：

这时候能够看到，input按钮的高度在各大浏览器下都同样了。咱们来个对比：

咱们将input按钮放大并标注他的像素来看看：

通过修正，咱们可让input按钮的高度都达到一致（25px），宽度width方面，

IE七、IE八、IE九、chrome表现的效果都是一致（38×25）的，此次最让我失望就是firefox了，

width竟然达到44px。有童鞋可能会说了，宽度不一致，还不是等于没修复吗？

好吧，我认为企图经过纯粹的CSS样式去让input标签样式中各个浏览器达到一致的效果几乎是不可 能的，

这不该该是表单设计须要过于纠结的问题，别在这方面浪费太多时间了。

也不是说彻底没有办法的，其中不少用js能够模拟实现一致的效果，最经典的就是 select下拉框。