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