为什么 Firefox 按钮更大？答案

【问题标题】：Why is Firefox button larger?为什么 Firefox 按钮更大？
【发布时间】：2011-10-28 19:27:51
【问题描述】：

.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浏览器不定义特殊参数的解决方案？

【问题讨论】：

标签： html css

【解决方案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;
 }

【讨论】：

不客气。您应该投票并接受对您有用的答案（“向上”箭头和“0”下方的钩子）。我推荐卡西米尔的，因为他是第一个。
谢谢，如果@fug3lla 不接受我的，我可以投票给你，以确保正确的答案保持在首位... ;-)

【解决方案2】：

在 Firefox 中，输入按钮有更多的填充，这可能有助于解决它：

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

此外，这个问题似乎或多或少相同（上面的代码建议在那里）：CSS: Size of buttons in Chrome is different than Firefox

【讨论】：

【解决方案3】：

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

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

【讨论】：

这就是我会做的，最好的方法可能是直接为firefox定义参数，但我会先等一分钟，因为这里有人肯定会有答案。跨度>