Question

我有按钮的以下样式类 -

.buttonStyleClass {
    padding:5px 20px;
}

当我尝试将按钮聚焦在Firefox中时，填充后焦点轮廓出现在按钮内部。但是，当您在Chrome中验证相同内容时，您会发现整个按钮的焦点包括填充。

在我的应用程序中，焦点大纲似乎在firefox中很奇怪，因为它在按钮内部出现了20个像素。

是否有针对此问题的CSS修复程序？

谢谢，
戈帕尔

Answer 1

实际上在Firefox和Chrome中我都会看到按钮的外观...查看this fiddle。您可以轻松隐藏轮廓：

.buttonStyleClass { outline: 0; }

如果这不是答案;你能给我们提供你的意思的小提琴或截图吗？

修改

它可能有点特定于操作系统，因为当我向按钮（button { border: 1px solid red; }）添加显式边框时，我只看到了虚线（内部）轮廓。

您可以使用:-moz-focus-inner选择器删除或更改大纲，如下所示：

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

另请查看updated fiddle

Answer 2

我意识到这是一个非常老的问题，但是实际上还没有人回答这个问题，并且有几个人给出了错误的建议。鉴于我是通过Google来到这里的，其他人可能会带着不好的建议来到这里。

出于可访问的原因，除非您用更好的样式替换它，否则切勿删除这样的样式。

代替：

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

尝试：

button::-moz-focus-inner {
  padding: inherit;
}

尝试一下

button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }

<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>

Answer 3

将此添加到您的CSS。

.buttonStyleClass:active { 
  outline: 0; 
}

Answer 4

您是否在网络浏览器中查看此内容？您在查询中说“应用程序”。

如果我理解正确，你会说：

Chrome ：填充内部按钮区域周围的轮廓。

Firefox ：概述填充之外的区域。

这是特定于浏览器的渲染问题。

我想到了两种解决方案。

不要使用填充按钮代替使用：

.buttonStyleClass {
    height:50px;
    line-height:50px;
    text-align:center;
}

或者使用-webkit定位来编写特定的浏览器css标记。

http://jsfiddle.net/JV6MH/4/

这个小提琴应该通过避免在按钮上使用填充来使焦点轮廓在firefox和chrome中都相同。

在Firefox中填充后出现焦点轮廓

4 个答案: