Dlaczego przycisk Firefox jest większy?

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

I to jest mój przycisk:

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

jako przycisk wynik Firefox ma coś takiego:

padding: 9px 8px!important; 

Czy istnieje rozwiązanie bez definicji specjalnych parametrów dla przeglądarki Mozilla?

Answer 1

Jeśli użyjesz pliku reset.css w arkuszu stylów, możesz ustawić domyślne wartości dla wszystkich przeglądarek podczas ładowania, a następnie przycisk firefox nie będzie większy. Używam tego jeden:

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

Answer 2

W Firefox, przycisk wejścia ma więcej wyściółkę, to może pomóc go rozwiązać:

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

Również ta kwestia wydaje się bardziej lub mniej samo (powyżej Kod jest sugerowane tam): CSS: Size of buttons in Chrome is different than Firefox

Answer 3

Firefox ma zastosowanie special padding to buttons, które można rozwiązać tak:

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