在 IE 和 Firefox 中隐藏锚轮廓的可访问性友好方式答案

【问题标题】：Accessibility-friendly way to hide anchor outlines in IE and Firefox在 IE 和 Firefox 中隐藏锚轮廓的可访问性友好方式
【发布时间】：2012-08-16 12:19:06
【问题描述】：

首先，我知道removing outlines hampers keyboard navigation。

Google Chrome（例如）解决此问题的方法是仅在用户使用键盘时显示轮廓。然而，即使我用鼠标单击，Internet Explorer 和 Firefox 似乎也会显示它们——我不喜欢这样。

所以我想要的是一种方法让 IE（如果可能的话，降到版本 7）和/或 Firefox 在我单击时不显示这些轮廓（在锚点上、锚点内的图像等），但仍然显示当我使用键盘时，它们就像 Google Chrome 的行为方式一样。

如果此解决方案仅适用于 CSS（即使使用非标准修复），那将是非常理想的。

【问题讨论】：

标签： css internet-explorer firefox focus accessibility

【解决方案1】：

这很好地解决了 IE 8 和 Firefox 的问题。

a:hover, a:active { outline: none; }

但是，我花了很长时间才弄明白：如果链接的目标没有指向任何地方，它就不会起作用。这意味着它不适用于 <a href="#"> 之类的东西。

Source.

【讨论】：