如何使input按钮的高度在不同浏览器中一样

最后更新于 2022 年 5 月 6 日

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

效果如下：

方法如下：

HTML结构

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;
}

结论

不管怎样，line-height属性在IE、Chrome和Sofari中对input按钮是起作用的，利用这个特点，就可以通过调节line-height的值使得input按钮的高度在IE、Chrome、Sofari和Firefox中基本一致。

推荐阅读材料：input 按钮在IE下兼容问题