¿Por qué es el botón de Firefox más 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; 
} 

y este es mi botón:

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

Como consecuencia botón en Firefox tiene algo como:

padding: 9px 8px!important; 

¿Hay alguna solución sin definición de parámetros especiales para el navegador Mozilla?

Answer 1

Si usa un reset.css en su hoja de estilo, puede establecer los valores predeterminados para todos los navegadores en carga, y luego el botón de firefox no sería más grande. Yo uso esta:

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

Answer 2

En Firefox, el botón de entrada tiene más relleno, esto podría ayudar a resolverlo:

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

Además, esta cuestión parece más o menos lo mismo (por encima código se sugiere allí): CSS: Size of buttons in Chrome is different than Firefox

Answer 3

Firefox aplica una special padding to buttons, que se puede tratar de esta manera:

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