如何保证各浏览器下 <input><button><a> 定义的按钮尺寸一样?

Amelie
  • 1.3k

如题,定义了下列表单按钮:

<button class="btn">Button</button>
<input type="button" class="btn" value="Input Button">
<a href="#" class="btn">A Button</a>

样式:

.btn {
    font: 14px/21px Arial;
    border: 1px solid #DDD;
    padding: 5px 10px;
    background: #FFF;
    color: blue;
    text-decoration: none;
}
a {
    display: inline-block;
}

http://jsfiddle.net/nCndX/

运行的时候,chrome 下按钮的大小一样了,但是 Firefox 和 IE 下尺寸又不一样了,有没有好的解决方法?

回复
阅读 19.9k
4 个回答
Humphry
  • 16.3k
✓ 已被采纳

①Firefox浏览器会默认设置input[type="button"]的行高为normal。quot: http://www.cssnewbie.com/input-button-line-height-bug/#.UXDOLLVTCEw,如下:

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

把行高统一设置为normal,可以解决一部分问题。

.btn {
    line-height:normal;
}

②Firefox在私有属性里面额外设置了边框和留白,去掉即可。

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner { border:none; padding:0; }

现在Firefox也表现一致了。

③最后,再针对ie7以下的button和input[type=button]随着字变宽的问题做Hack。

.btn {
    *overflow:visible ;
}

——

题外话,其实他们的vertical-align的多浏览器适配也是让人肝肠寸断。

52lidan
  • 2.8k

我勒个去,我以为就我研究透彻了,没想到一楼全说了。 补充一句,chrome和firefox会认为type为button的按钮为border-box盒模型,当然IE也是,但是a却以正常的content box盒模型渲染,所以,为了渲染一致,你需要将button声明为content-box。火狐按钮button的宽度,padding置为0是不顶用的,需要使用私有属性,

.btn input, .btn button { -moz-padding-start:npx; -moz-padding-end:npx; }

另外,IE9的button宽度在字数超过八九个汉字的时候带有小数点,这个你得测测,一般按钮宽度不会超过这么多的字数。 详见此贴:按钮兼容问题

小子
  • 674

这个主要是ff和opera下line-height对input['button'],button不起作用,然后还是用padding来做吧,先把line-height置为normal

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

input.button, a.button, button {
    font: bold 12px Arial, Helvetica, sans-serif;
    padding: 5px 8px;
}

至于一些微小的细节可以使用hack去调整,这样一来,还有个mac chrome下input submit样式的问题

还有,貌似IE7下,按钮的长度会比较长,我是用overflow解决的:

overflow:visible
yuyufen
  • 1
新手上路,请多包涵

css:为什么同样长度的设置在不同的浏览器表现出来不一样?
![图片上传中...]
clipboard.png

宣传栏