让表单input按钮的高度在不同浏览器中一样-会学html CSS

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

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

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

效果如下:

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

HTML结构

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

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

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

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

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

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

更新