为什么火狐浏览器的按钮更大？

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浏览器上使用？

- user1018209

Answer 1

火狐浏览器对按钮应用了特殊的内边距，你可以按照以下方式进行调整：

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

- Boldewyn

---

不客气。你应该给那个对你有用的答案点赞并接受它（即“向上”的箭头和下面的钩子）。我建议选择kasimir的，因为他回答得最早。 - Boldewyn

谢谢，如果@fug3lla不接受我的答案，我可以给你的答案点赞，以确保正确的答案始终处于顶部...;-) - kasimir

Answer 2

在Firefox浏览器中，输入按钮的填充更多，这可能有助于解决问题：

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

此外，这个问题似乎与以下问题类似（建议使用上面的代码）：CSS：Chrome和Firefox中按钮的大小不同。

- kasimir

Answer 3

如果您在样式表中使用reset.css，它可以在加载时为所有浏览器设置默认值，那么Firefox按钮就不会变大。我使用的是这个：

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

- Aaron Lee

---

这是我会做的，最好的方法可能是直接为Firefox定义参数，但我会先等一分钟，因为这里肯定有人会有答案。 - Aaron Lee