在Firefox中删除额外的按钮间距/填充 [英] Remove extra button spacing/padding in Firefox

问题描述

请参阅此代码示例：

包括 border 上面的规则对于按钮在两个浏览器中看起来是一样的，但是当按钮 active 在Firefox。许多开发人员摆脱了这个虚线轮廓，可以用更加视觉友好的东西替换它。

See this code example: http://jsfiddle.net/Z2BMK/

Chrome/IE8 look like this

Firefox looks like this

My CSS is

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 href URL which is not a clean way to handle things.

My solution, since Firefox 13

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

解决方案

Add this:

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

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

Including the border rule above is necessary for buttons to look the same in both browsers, but also it removes the dotted outline when the button is active in Firefox. Lots of developers get rid of this dotted outline, optionally replacing it with something more visually friendly.

这篇关于在Firefox中删除额外的按钮间距/填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！