Firefox中的按钮填充和最大宽度

Question

我正在尝试设置一些按钮的样式，我试图限制我的按钮的宽度并有一些水平填充，因此文本和边框之间有一些空间。

因此我将以下CSS应用于我的课程：

.class1 {
    border: 1px solid;
    padding: 0 20px;
    max-width: 100px;
    white-space: nowrap;
    overflow:hidden;
}

有关示例，请参阅此jsFiddle。

我的问题是，当文本太长时，Firefox（最新版本：22）不再尊重左边距，并使文本粘贴到左边框，如此截图中的中间按钮所示：

当Chrome仍然尊重左侧填充时：

有什么方法可以让Firefox的行为与Chrome和IE10相同吗？

我已经确定了一些事情：

• IE10的行为与Chrome相同，所以我认为这是一个Firefox问题。
• 如果我用跨度替换按钮，它可以工作，但我当然需要按钮。如果没有必要，我想避免使用<a>，因为它在语义上不正确。
• 更改box-sizing属性或重置-moz-focus-inner无效。

Answer 1

试试这个'hack'：

.class1::-moz-focus-inner {

    padding: 0px 20px;

}

您必须删除Firefox中的填充以防止双重填充。

@-moz-document url-prefix() {

    .class1 {

        padding: 0px;

    }

}

（它适用于FF 22，jsFiddle）