फ़ायरफ़ॉक्स बटन बड़ा क्यों है?

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> 

फ़ायरफ़ॉक्स में परिणाम बटन के रूप में कुछ ऐसा है:

padding: 9px 8px!important; 

क्या मोज़िला ब्राउज़र के लिए विशेष पैरामीटर की परिभाषा के बिना कोई समाधान है?

Answer 1

यदि आप अपनी स्टाइलशीट में reset.css का उपयोग करते हैं, तो यह लोड पर सभी ब्राउज़रों के लिए डिफ़ॉल्ट मान सेट कर सकता है, फिर फ़ायरफ़ॉक्स बटन बड़ा नहीं होगा। मैं इस एक का उपयोग करें: (ऊपर

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

इसके अलावा, इस सवाल का लगभग समान ही लगता है: अधिक

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

Answer 2

Firefox में, इनपुट बटन है गद्दी, इस इसे सुलझाने के लिए मदद कर सकता है कोड वहाँ का सुझाव दिया है): CSS: Size of buttons in Chrome is different than Firefox

Answer 3

फ़ायरफ़ॉक्स एक 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; 
}