css - 如何使 Firefox 按钮尊重填充？

Question

出于某种原因，Firefoxbutton元素似乎不尊重 CSSpadding声明，即使您将它们设为display: block.

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

请注意填充在 Chrome 中是如何工作的，但在 Firefox 中则不然。如何让 Firefox 关注padding元素button？

这是它在我机器上的 Firefox 上的屏幕截图：

内边距应该是 20 像素，但不受影响。

score 4 · Accepted Answer

信用应该去下面的鲍里斯，但你需要使用 -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 中通过“边框半径”样式和填充来实现相同的按钮效果。

score 2 · Accepted Answer

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

处理此问题的最安全方法是设置-moz-appearance: none是否要放弃原生主题外观。

score 0 · Accepted Answer

0

在此处输入图像描述

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

于 2013-07-15T05:26:51.657 回答

3 回答 3