Избегайте серого фона на IE 10 якоря/ссылки

Как вы избегаете раздражающего серого фона, который IE 10 применяет к якорям при нажатии на них?

Ответ 1

На самом деле действительно очень простое исправление CSS. IE 10 изменяет теги привязки background-color, когда они находятся в состоянии :active. Чтобы остановить это или изменить цвет, вы можете использовать правило CSS ниже.

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

Live demo: http://jsfiddle.net/tw16/NtjK7/

С другой стороны, стоит упомянуть, что при компоновке ссылок вам необходимо убедиться, что вы пишете правила в правильном порядке, чтобы гарантировать, что предыдущие стили не будут перезаписаны:

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

Ответ 2

Я нашел, что это было на самом деле: фокус, который добавил серый фон.

это сработало для меня:

a:focus {
    background-color: transparent;
}

Ответ 3

Мне не удалось найти много информации, но я нашел одно исправление:

Оберните текст якоря в span

Рабочее решение

Если вы не хотите менять каждый якорь в своем HTML, вы можете использовать script как этот:

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

Рабочее решение

Примечание: просто добавьте класс 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;}

См. в действии