Firefoxのボタンが大きいのはなぜですか？

Question

.ui_btn , .sub_txt { 
margin: 2px 0px 2px 3px; 
background:#181c18; 
cursor: pointer; 
display: inline-block; 
text-align: center; 
text-decoration: none; 
text-transform:lowercase; 
} 

.ui_btn input, .sub_txt input , .disabled input{ 
border-spacing: 0px; 
background: none; 
color: #fff; 
outline:0!important; 
margin:0!important; 
cursor: pointer; 
display: inline-block; 
font-weight: bold; 
border: 1px solid #181c18; 
font-family: Arial, sans-serif; 
font-size: 11px; 
padding: 7px 6px!important; 
white-space: nowrap; 
text-transform:lowercase; 
line-height: 12px!important; 
} 

そして、これは私のボタンです：

<label id="SD_mrs_t" class="ui_btn" for="SD_mrs"> 
<input id="SD_mrs" value="More Specific" type="button"/> 
</label> 

Firefoxで結果ボタンのようなものがあるとして：

padding: 9px 8px!important; 

をMozillaのブラウザのための特別なパラメータの定義せずに任意の解決策はありますか？

Answer 1

あなたのスタイルシートでreset.cssを使用すると、ロード時にすべてのブラウザのデフォルト値を設定でき、Firefoxのボタンは大きくなりません。私はこの1つを使用する：Firefoxの、入力ボタンで

http://meyerweb.com/eric/tools/css/reset/

Answer 2

は、より多くのパディングを持っている、これはそれを解決するのに役立つかもしれない：

/* Remove button padding in FF */ 
button::-moz-focus-inner { 
    border:0; 
    padding:0; 
} 

また、この質問は同じ（上記多かれ少なかれようですコード）が提案されている：CSS: Size of buttons in Chrome is different than Firefox

Answer 3

Firefoxはあなたがこのように対処することができspecial padding to buttons、適用されます。

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