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

看到这个代码示例： 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; } 

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

我的解决scheme，自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规则对于在两个浏览器中看起来相同的button是必要的，但是当button在Firefox中active时，它也会去除虚线轮廓。 许多开发人员摆脱了这个虚线的轮廓，可选地更换一些更直观的东西。

Answer 2

要修复它在input元素以及添加

 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 

简单完美！