input、button、a標簽 等定義的按鈕尺寸的兼容性問題

在項目中有遇到這類問題，搜索了一下解決方式，采用鏈接：https://segmentfault.com/q/1010000000190931 里各位樓主的答案，摘抄如下：

例子如下：

ＨＴＭＬ：

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

 

方法一：

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

 

方法二：

注意：

這個主要是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;
}

 

補充一句，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寬度在字數超過八九個漢字的時候帶有小數點，這個得測測，一般按鈕寬度不會超過這么多的字數。 詳見此貼：http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3058884