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

Question

如何避免IE 10应用于锚点时令人讨厌的灰色背景?

Answer 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 */

Answer 2

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

this works for me:

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

实际操作