html - 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

操作系统/浏览器默认样式的执行方式与 CSS 的工作方式和 CSS 本身支持的方式不同。一旦您更改了按钮的背景，可能很难甚至不可能保留应用默认样式的其他方面。

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

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

::-moz-focus-inner需要伪元素来摆脱 Firefox 中的隐式额外填充。