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 中的隐式额外填充。