81

请参阅此代码示例:http: //jsfiddle.net/Z2BMK/

Chrome/IE8 看起来像这样

在此处输入图像描述

火狐看起来像这样

在此处输入图像描述

我的 CSS 是

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

如何更改代码示例以使两个浏览器中的按钮相同?我不想使用基于 JavaScript 的超链接,因为它们不能与键盘上的空格键一起使用,而且它必须有一个hrefURL,这不是一种干净的处理方式。

我的解决方案,从 Firefox 13 开始

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

4

3 回答 3

164

添加这个:

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

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

包含上述border规则对于按钮在两个浏览器中看起来相同是必要的,但当按钮active在 Firefox 中时,它也会删除虚线轮廓。许多开发人员摆脱了这种虚线轮廓,可选地用视觉上更友好的东西代替它。

于 2011-04-01T19:52:23.393 回答
8

要在输入元素上修复它,还要添加

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

简单完美!

于 2012-11-16T10:34:46.910 回答
0

@thirtydot 答案的更正版本:

button:: {
    padding: 0px;
    border: 0px;
}

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

关于 Firefox 87:

  • buttoninbutton::-moz-focus-inner不能是一个类。(例如.mybutton::-moz-focus-inner不起作用)

  • 还必须有一种button { padding:0px; border: 0px; }风格(这种风格可以为每个班级提供)。

于 2021-04-14T00:05:13.743 回答