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

【问题标题】：padding and max-width of buttons in FirefoxFirefox 中按钮的填充和最大宽度
【发布时间】：2013-07-21 13:04:30
【问题描述】：

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

因此，我将以下 CSS 应用到我的班级：

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

请参阅此jsFiddle 以获取示例。

我的问题是，当文本太长时，Firefox（最新版本：22）不再尊重左填充并让文本粘在左边框上，正如屏幕截图中的中间按钮所示：

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

有什么方法可以让 Firefox 的行为方式与 Chrome 和 IE10 一样吗？

我已经确定的一些事情：

【问题讨论】：

标签： button css

【解决方案1】：

试试这个“黑客”：

.class1::-moz-focus-inner {

    padding: 0px 20px;

}

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

@-moz-document url-prefix() {

    .class1 {

        padding: 0px;

    }

}

（它适用于 FF 22，jsFiddle）

【讨论】：

你说得对，我确实可以用这种方法做点什么。非常感谢。
等等，更复杂。为此，我必须删除 class1 规则中的填充，否则它的填充量将是短填充的两倍。但是它在其他浏览器中不会有任何填充，只有在 Firefox 中。你有什么东西可以两者兼得吗？
我会编辑我的答案！请记住，这些技巧可能不会成为未来的证明。您应该在新的浏览器中检查它们。