在 Firefox 中删除额外的按钮间距/填充

Question

请参阅此代码示例： http : //jsfiddle.net/Z2BMK/

Chrome/IE8 看起来像这样

Firefox 看起来像这样

我的 CSS 是

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

如何更改代码示例以使两个浏览器中的按钮相同？ 我不想使用基于 JavaScript 的超链接，因为它们不能与键盘上的空格键一起使用，而且它必须有一个href URL，这不是一种处理事情的干净方式。

我的解决方案，因为 Firefox 13

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

Answer 1

添加这个：

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

http://jsfiddle.net/thirtydot/Z2BMK/1/

包括上面的border规则对于按钮在两种浏览器中看起来相同是必要的，而且当按钮在 Firefox 中active时，它也会删除虚线轮廓。 许多开发人员摆脱了这种虚线轮廓，可选择用视觉上更友好的东西替换它。

Answer 2

要将其固定在输入元素上以及添加

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner

简单完美！

Answer 3

@thirtydot 答案的更正版本：

button:: {
    padding: 0px;
    border: 0px;
}

button::-moz-focus-inner {
    padding: 0px;
    border: 0px;
}

关于 Firefox 87：

• button button::-moz-focus-inner中的button::-moz-focus-inner不能是类。 （例如.mybutton::-moz-focus-inner不起作用）

• 必须有一个button { padding:0px; border: 0px; } button { padding:0px; border: 0px; } button { padding:0px; border: 0px; }本风格以及（此风格可以每类给出）。