Question

可以remove the extra Firefox-specific spacing from <button> tags。唯一的缺点是，当您专注于键盘上的按钮时，轮廓将会丢失。

我非常想在Chrome，IE8和Firefox上使我的按钮保持一致。如果我可以使用CSS :hover，我可以使用删除Firefox间距和轮廓的相同样式轻松地将按钮显示为聚焦。

没有JavaScript，有没有办法做到这一点？我不在乎其他浏览器是否忽略该规则。事实上，如果有这样的话我会更喜欢:-moz-focused，所以我可以肯定它不会在其他浏览器中发生。

此外，如果可以在Firefox中完成Chrome风格的外部发光，那将是两倍。

Answer 1

事实上，有一个:focus选择器。这不是你需要的吗？

a:hover, a:active, a:focus {
   border: 1px dotted #f00;
}

我已经做了相当不错的结果，尽管可以通过点击和制表符的正确组合来突出显示多个元素（一个是活动的，另一个是聚焦的）。在正常使用中不太可能是一个问题，尽管您可能会考虑悬停/活动和焦点之间的视觉区别。

另请注意，IE8和9支持:focus，但早期版本不支持{{1}}。（quirksmode.org上的图表似乎表明它在8中不起作用，但测试显示不然。）

Answer 2

CSS为此目的使用:focus选择器，其工作方式与:hover类似，但适用于具有焦点的元素。似乎没有特定于Firefox的版本。