避免在 IE 10 锚点/链接上使用灰色背景答案

【问题标题】：Avoid grey background on IE 10 anchors / links避免在 IE 10 锚点/链接上使用灰色背景
【发布时间】：2013-02-26 20:18:03
【问题描述】：

如何避免在单击锚点时 IE 10 对锚点应用的恼人的灰色背景？

【问题讨论】：

标签： css styles anchor internet-explorer-10

【解决方案1】：

实际上有一个非常简单的 CSS 修复程序。 IE 10 会在锚标记处于:active 状态时更改它们的background-color。要阻止它发生或更改颜色，您可以使用下面的 CSS 规则。

a:active{
    background-color: transparent; /* Can be any colour, not just transparent */
}

现场演示：http://jsfiddle.net/tw16/NtjK7/

另一方面，值得一提的是，在为链接设置样式时，您需要确保以正确的顺序编写规则，以确保以前的样式不会被覆盖：

a:link{}    /* 1st */
a:visited{} /* 2nd */
a:hover{}   /* 3rd */
a:active{}  /* 4th */

【讨论】：

比我找到的修复方法好多了。
显然需要小心，如果您的锚点确实有背景颜色，因为当您点击时，您会在它后面看到颜色的闪光

【解决方案2】：

我发现实际上是 :focus 添加了灰色背景。

这对我有用：

a:focus {
    background-color: transparent;
}

【讨论】：

上述答案和@tw16 的答案（以上）的组合完全为我解决了这个问题。我必须这样做才能让 Windows 8.1 上的 IE11 正常运行：a:focus, a:active

【解决方案3】：

我找不到很多信息，但我确实找到了一个解决方法：

将锚文本包裹在span

Working Solution

如果您不想更改 HTML 中的每个锚点，您可以使用如下脚本：

$("a:not(.dont-use-span)").each(function() {
    $(this).html("<span>" + $(this).html() + "</span>");
});

Working solution

注意：只需将 dont-use-span 类添加到您不想修改的锚点

【讨论】：

【解决方案4】：

经过多次徒劳的测试，我终于使它可以使用：

  a               {color:#fff; background-color:#f77927 !important;}
  a:hover         {color:#fff; background-color:#e65e06 !important;}
  a.active        {color:#fff; background-color:#e65e06 !important;}
  a.focus         {color:#fff; background-color:#e65e06 !important;}

See in action

【讨论】：