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

发布于 2024-10-29 08:57:47 字数 682 浏览 6 评论 0原文

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;填充：0；边框宽度：1px； }

原文

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

Chrome/IE8 look like this

enter image description here

Firefox looks like this

enter image description here

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; }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

濫情▎り 2024-11-05 08:57:48

@thirtydot 答案的更正版本：

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

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

关于 Firefox 87：

button::-moz-focus-inner 中的
button 不能是一个类。（例如 .mybutton::-moz-focus-inner 不起作用）
必须有一个 button { padding:0px;边框：0px； } 样式也存在（该样式可以为每个类指定）。

Corrected version of @thirtydot's answer:

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

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

Regarding Firefox 87:

button in button::-moz-focus-inner cannot be a class. (E.g. .mybutton::-moz-focus-inner does not work)
There must be a button { padding:0px; border: 0px; } style present as well (This style can be given per class).

回复收藏 0 原文

水水月牙 2024-11-05 08:57:47

添加以下内容：

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

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

包括 <上面的 code>border 规则对于按钮在两种浏览器中看起来相同是必要的，而且当按钮在 Firefox 中active 时，它也会删除虚线轮廓。许多开发人员摆脱了这种虚线轮廓，选择用视觉上更友好的东西替换它。

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.

回复收藏 0 原文

无力看清 2024-11-05 08:57:47

将其修复在输入元素上并添加

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

是简单而完美的！

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!

回复收藏 0 原文

~没有更多了~