Tại sao nút Firefox lại lớn hơn?

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

Và đây là nút của tôi:

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

Là một nút kết quả trong Firefox có cái gì đó như:

padding: 9px 8px!important; 

Có giải pháp nào mà không cần định nghĩa các thông số đặc biệt dành cho trình duyệt Mozilla?

Answer 1

Nếu bạn sử dụng reset.css trong biểu định kiểu, nó có thể đặt giá trị mặc định cho tất cả các trình duyệt khi tải, sau đó nút firefox sẽ không lớn hơn. Tôi sử dụng này: padding

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

Answer 2

Trong Firefox, nút đầu vào có nhiều hơn, điều này có thể giúp giải quyết nó:

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

Ngoài ra, câu hỏi này dường như nhiều hơn hoặc ít hơn như nhau (trên đang đề nghị có): CSS: Size of buttons in Chrome is different than Firefox

Answer 3

Firefox áp dụng một special padding to buttons, mà bạn có thể giải quyết như thế này:

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