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

Posted 2023-03-06

【中文标题】在 Firefox 中删除额外的按钮间距/填充

【英文标题】：Remove extra button spacing/padding in Firefox

【发布时间】：2011-07-27 22:15:02

【问题描述】：

查看此代码示例：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 的超链接，因为它们不能与键盘上的空格键一起使用，而且它必须有一个 href URL，这不是一种干净的处理方式。

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

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

【问题讨论】：

为什么加margin: -1px？它是否以某种方式连接到border: 2px？

查看我的编辑。 -moz-focus-inner 的 border-width 默认情况下是 1px，因此将 border-width 写入代码是多余的，但它可以更清楚地说明发生了什么。它也可能有助于未来的验证。要回答您的问题，Firefox 中的border-width 是造成差异的原因，添加margin: -1px 是比我之前的解决方案更兼容的解决方案。

我认为接受的答案在视觉上是等效的，但比您的解决方案更好。接受的答案会删除 FF 添加的内容，并使内容在所有浏览器中以相同的方式呈现。您的解决方案会在其位置留下一个由 FF 添加的额外边框，并使用 margin: -1px 隐藏一个像素的两像素边框。这太复杂了。如果出现以下情况，它会中断：1）渲染引擎中出现错误（发生），2）边框颜色不同，3）您放大。为了演示您的解决方案的潜在问题，我准备了一个小提琴：jsfiddle.net/Z2BMK/455。请放大并注意出现红色边框。

我能看到你回答的唯一好处是保留 FF 的“按钮处于活动状态时的虚线轮廓”功能

是的，这正是使我的解决方案变得更好的原因。应该有一些东西告诉用户他们的键盘焦点在哪里。

【参考方案1】：

添加这个：

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

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

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

【讨论】：

要在 Firefox 中使用 Chrome 风格的焦点发光，请使用 buttonbackground:/*Something here*/ button:focus-moz-box-shadow:0 0px 3px #C80;。这弥补了没有虚线的情况，并提供了我所追求的浏览器一致性。

这正是我所需要的。谢谢！

要在输入元素上修复它并添加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

太棒了！谢谢！这有帮助！

@Stefan jsfiddle.net/LjhQ5/1 它似乎工作正常（file css 除外）。抱歉，我试图在页面上执行此操作的 css 一定有冲突。谢谢。

【参考方案2】：

要修复它在输入元素上以及添加

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

简单完美！

【讨论】：

你知道这个解决方案的浏览器兼容性吗？

input[type="file"] > input[type="button"]::-moz-focus-inner 不是多余的，因为您已经添加了input[type="button"]::-moz-focus-inner，或者这不是您的经验？你知道吗？

@GeorgeBailey：浏览器兼容性为 Firefox 3+，此代码不影响任何其他浏览器。

@GeorgeBailey 我认为这个答案是为了回应this 评论。

【参考方案3】：

@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; border: 0px; 样式（可以为每个班级指定此样式）。