为什么<button>在Firefox中仍然有填充时设置为0

有人能解释为什么<button>元素仍然有一点填充，无论样式是什么？比较以下代码片段中的四个元素：<button> <a> <span> <div>，它们都应用了相同的样式。最后三个看起来完全相同，但按钮固执地拒绝在Firefox中丢失填充。 Inspector显示它在Chrome中呈现相同的内容，但不包含Firefox。为什么<button>在Firefox中仍然有填充时设置为0

是否有我可以应用来控制这个CSS规则？

.style { 
 
    padding: 0px; 
 
    border: none; 
 
    background-color: #000; 
 
    color: #fff; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    display: inline-block; 
 
}

<button class="style">TEST</button> 
 
<a class="style">TEST</a> 
 
<span class="style">TEST</span> 
 
<div class="style">TEST</div>

来源

2016-12-28 billynoah

您可以在Firebug检查，没有按键的填充是只需将用户代理余量添加到body tag即可 –

正确，没有填充..但是..有。而按钮是不同的像素大小。用户代理的风格在做什么？ – billynoah

是的，不同的useragent有自己的css，也是你的浏览器的设置，如字体大小，颜色等。 –

-1

它基本上是火狐浏览器的问题，所以尝试添加button::-moz-focus-inner {padding: 0;border: 0}

.style { 
 
    padding: 0px; 
 
    margin: 0; 
 
    border: none; 
 
    background-color: #000; 
 
    color: #fff; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    display: inline-block; 
 
} 
 
button::-moz-focus-inner { 
 
    padding: 0; 
 
    border: 0 
 
}

<button class="style">TEST</button> 
 
<a class="style">TEST</a> 
 
<span class="style">TEST</span> 
 
<div class="style">TEST</div>

来源

2016-12-28 05:07:47 aavrug

不。按钮仍然较大。 – billynoah

这可能与操作系统或Firefox版本不同，但在我的浏览器中它们的大小不一样。 – billynoah

不是所有的都是'''36px X 16px''' – aavrug

为什么<button>在Firefox中仍然有填充时设置为0

回答

相关问题