Perché il pulsante di Firefox è più grande?

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

E questo è il mio tasto:

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

come un pulsante risultato in Firefox ha qualcosa come:

padding: 9px 8px!important; 

Esiste una soluzione senza definizione dei parametri speciali per il browser Mozilla?

Answer 1

Se si utilizza un reset.css nel foglio di stile, è possibile impostare i valori predefiniti per tutti i browser sul carico, quindi il pulsante Firefox non sarebbe più grande. Io uso questo:

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

Answer 2

In Firefox, il pulsante di ingresso ha più imbottitura, questo potrebbe aiutare a risolvere il problema:

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

Inoltre, questa domanda sembra più o meno lo stesso (sopra il codice è suggerita lì): CSS: Size of buttons in Chrome is different than Firefox

Answer 3

Firefox applica una special padding to buttons, che si può affrontare in questo modo:

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