如何从 Firefox 中的按钮中删除默认填充？

Question

我在按钮内有一个 span 元素。跨度有一个背景颜色，但我无法让它填充 Firefox 中的按钮，在 Chrome 和 IE 中很好。

我看过两个类似的问题，但他们的答案似乎并没有为我解决这个问题。

• 在 Firefox 中删除额外的按钮间距/填充
• 使用锚标记的Firefox奇数填充

这是我的问题的精简版：

div {
    height: 300px;
    width: 300px;
    background-color: red;
}
button {
    padding: 0px;
    margin: 0px;
    color: inherit;
    border: 0px none;
    background-color: blue;
}
span {
    background-color: yellow;
    display: block;
    width: 100%;
}

<div>
    <button><span>span</span></button>
</div>

Answer 1

就像这里解释的那样：“ Firefox 添加了一个特殊的paddingsinput和按钮元素。 ”

这实际上解决了你的问题。

http://jsfiddle.net/2fm31sd7/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;
  border: 0 none;
}