Question

由于某些原因，Firefox button元素似乎不尊重CSS padding声明，即使您将它们display: block生成。

在Chrome和Firefox中查看此JSFiddle：http://jsfiddle.net/DgeQ6/

请注意填充在Chrome中的工作原理，但不适用于Firefox。如何让Firefox关注padding元素中的button？

以下是我机器上Firefox的外观截图：

填充应该是20px但不受影响。

Answer 1

应该转到下面的Boris，但你需要使用-moz-appearance：none来覆盖操作系统级按钮样式。这是一个小提琴：http://jsfiddle.net/DgeQ6/8/。

HTML

<button class="btn-large">Hello</button>

CSS

.btn-large {
    padding: 100px;
    -moz-appearance: none;
}

还应该注意的是，Twitter Bootstrap似乎只是通过“边框半径”样式和填充来实现Firefox中按钮的相同效果。

Answer 2

填充本身在Mac上不起作用，因为Mac本机主题查找按钮会覆盖填充。例如，在Windows上它可以正常工作。我不记得Linux上的行为是什么。

如果您想放弃以原生为主题的外观，最安全的方法是设置-moz-appearance: none。

Answer 3

enter image description here

在我的Firefox中看起来像这样。