在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按钮在两个浏览器中看起来都是必要的,包括上面的规则,但是当按钮active在Firefox中时,它也会删除虚线轮廓.许多开发人员摆脱了这个虚线轮廓,可选择用更具视觉友好性的东西替换它.

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

简单完美!