html - 为什么 Firefox 按钮更大？

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>

因此 Firefox 中的按钮类似于:

padding: 9px 8px!important;

有没有Mozilla浏览器不定义特殊参数的解决方案？

Answer 1

Firefox 应用 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;
 }