css - 避免 IE 10 锚点/链接上的灰色背景

Question

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

Answer 1

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

Answer 2

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

这对我有用：

a:focus {
    background-color: transparent;
}

Answer 3

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

将锚的文本包裹在一个span

工作解决方案

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

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

工作解决方案

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

Answer 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;}

看实际