CSS：为什么样式按钮元素与其他CSS不同？

Question

http://jsfiddle.net/q6dgv/

<button type="submit" style="padding: 10px;">Button</button>

没有填充，但是：

<button type="submit" style="padding: 10px; background: #ff0000;">Button</button>

确实有填充。

这可能是FF错误吗？我已在其他浏览器中测试过，它按预期工作。我也尝试了其他的CSS，它们没有效果，只是背景。

确定。因为没有人在回答......按钮的重置是什么？如何摆脱默认边框，框阴影等。将背景与没有边框，轮廓等结合使用不会重置按钮。

Answer 1

如何执行OS /浏览器默认样式与CSS的工作方式和CSS本身支持的内容不同。一旦你改变了按钮的背景，就可能很难甚至不可能保持默认样式的其他方面。

要删除默认边框和填充，通常使用以下代码：

BUTTON,
BUTTON::-moz-focus-inner {
    border: 0;
    padding: 0;
}

需要

::-moz-focus-inner伪元素来消除Firefox中的隐式额外填充。