CSS 在 Firefox 中删除额外的按钮间距/填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5517744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove extra button spacing/padding in Firefox
提问by Bryan Field
See this code example: http://jsfiddle.net/Z2BMK/
请参阅此代码示例：http: //jsfiddle.net/Z2BMK/
Chrome/IE8 look like this
Chrome/IE8 看起来像这样
Firefox looks like this
Firefox 看起来像这样
My CSS is
我的 CSS 是
button {
padding:0;
background:#080;
color:white;
border:solid 2px;
border-color: #0c0 #030 #030 #0c0;
margin:0;
}
How can I change the code sample to make the button the same in both browsers? I do not want to use JavaScript based hyperlinks because they do not work with space bar on keyboard and it has to have an hrefURL which is not a clean way to handle things.
如何更改代码示例以使两个浏览器中的按钮相同？我不想使用基于 JavaScript 的超链接，因为它们不能与键盘上的空格键一起使用，而且它必须有一个hrefURL，这不是一种处理事情的干净方式。
My solution, since Firefox 13
我的解决方案，因为 Firefox 13
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
回答by thirtydot
Add this:
添加这个：
button::-moz-focus-inner {
padding: 0;
border: 0
}
http://jsfiddle.net/thirtydot/Z2BMK/1/
http://jsfiddle.net/thirtydot/Z2BMK/1/
Including the borderrule above is necessary for buttons to look the same in both browsers, but also it removes the dotted outline when the button is activein Firefox. Lots of developers get rid of this dotted outline, optionally replacing it with something more visually friendly.
包括border上面的规则对于按钮在两种浏览器中看起来相同是必要的，但是当按钮active在 Firefox 中时它也会删除虚线轮廓。许多开发人员摆脱了这种虚线轮廓，可选择用视觉上更友好的东西替换它。
回答by Marcelo Hexsel
To fix it on input elements as well add
要将其固定在输入元素上以及添加
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
is simple perfect!
简单完美！
