运行时，chrome 下按钮的大小一样了，但是 Firefox 和 IE 下尺寸又不一样了？为什么？

Question

如题，定义了下列表单按钮：

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

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

Answer 1

这个主要是ff和opera下line-height对input['button'],button不起作用，然后还是用padding来做吧，先把line-height置为normalbutton, 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

Answer 2

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宽度在字数超过八九个汉字的时候带有小数点，这个你得测测，一般按钮宽度不会超过这么多的字数。