让表单input按钮的高度在不同浏览器中一样

html表单input按钮的高度在各个浏览器中表现不尽一致，如果想让input text和input button在一条直线上显示，常常在firefox下看着两个一样高，到IE或Chrome里就不一样高了。

效果如下：

在各种浏览器按钮一样高方法代码如下：

HTML结构

<input type="submit" value="Search" class="button"> 

按钮一样高CSS样式代码如下：

.button{ 
background: #fff; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ 
background: linear-gradient(top, #ffffff 0%,#ededed 100%); /* W3C */ 
border: 1px solid #CCCCCC; 
color: #777777; 
font: 12px/50px Arial,Tahoma,Verdana,sans-serif; 
padding: 4px 10px; 
cursor: pointer; 
overflow: visible; border-radius: 4px 4px 4px 4px; 
} 

Firefox中给input按钮设定line-height属性不起作用，貌似是因为Firefox中有如下设置

button, input[type="reset"], input[type="button"], input[type="submit"] { 
line-height:normal !important; 
} 

让html表单按钮input一样高技巧说明：
line-height属性在IE、Chrome和Sofari中对input按钮是起作用的，利用这个特点，就可以通过调节line-height的值使得input按钮的高度在IE、Chrome、Sofari和Firefox中基本一致。