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

问题描述

限时删除！！

查看此代码示例:

包括上面的 border 规则是按钮在两种浏览器中看起来相同的必要条件，但它也会删除当按钮在 Firefox 中处于 active 时的虚线轮廓.许多开发者去掉了这种虚线轮廓，可选择用视觉上更友好的东西代替它.

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 中删除额外的按钮间距/填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..