如何让Firefox按钮尊重填充？

由于某些原因，Firefox button元素似乎并不尊重CSS padding声明，即使您将它们设为display: block。如何让Firefox按钮尊重填充？

看到这个的jsfiddle在Chrome和Firefox：http://jsfiddle.net/DgeQ6/

注意如何在Chrome而不是Firefox中的填充作品。如何让Firefox在button元素中关注padding？

下面是它的外观在Firefox我的机器上的截图：

垫料应为20px，但它不会受到影响。

2013-07-15 cdmckay

升级你的Firefox。它工作正常... – archu

我使用的是Firefox 22 ... – cdmckay

我使用的是Firefox 20，它看起来非常好 – archu

Credit应该在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的引导似乎只是沿着具有“边界半径”的造型，以实现其在Firefox按钮同样的效果与填充。

2013-07-15 05:07:36

填充本身在Mac上不起作用，因为按钮的Mac原生主题外观覆盖了填充。例如，在Windows上，它工作得很好。我不记得在Linux上的行为是什么。

处理此问题的最安全方法是设置-moz-appearance: none，如果您要删除以本机为主题的外观。

2013-07-15 05:26:43

感谢鲍里斯的澄清。我在上面更新了我的答案并给了代表。你碰巧明白为什么使用border-radius：0和padding结合起来也可以达到与Firefox相同的效果？ –

@MinhNguyen当然。以非默认操作系统风格的方式设计边框样式也会降低本机主题，所以这只是一种奇怪的方式来实现'-moz-appearance：none'的效果。 –

enter image description here

它看起来像这样在我的Firefox浏览器。

2013-07-15 05:26:51 archu

回答