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

Answer 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

Answer 3

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

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

为什么Firefox按钮更大？

3 个答案: