Как убрать пунктирную границу вокруг активных гиперссылок в IE8 с помощью CSS

Question

Активные тексты гиперссылок выделены пунктирной рамкой. При использовании эффектов для таких гиперссылок (fadeIn / fadeOut) это вызывает странные эффекты. Как отключить / удалить пунктирную рамку?

Answer 1

Попробуйте этот CSS:

a:active, a:selected, a:visited { 
    border: none;
    outline: none;
}

Обратите внимание, что это должно быть после любых a:hover правил. Спасибо PEra в комментариях за предложение также использовать селектор a:selected.

Примечание

Вышеуказанное не работает в IE 9. Удаление: selected заставляет его работать в IE9.

Answer 2

Типичный и безопасный способ сделать это это:

a:active, a:focus {
   outline:  none; /* non-IE */
   ie-dummy: expression(this.hideFocus=true); /* IE6-7 */
}

Поскольку в IE8 был потрошен expresssion(), вам может понадобиться скрипт:

if (document.documentElement.attachEvent)
    document.documentElement.attachEvent('onmousedown',function(){
         event.srcElement.hideFocus=true
    });

Если вы собираетесь удалить контур фокуса по умолчанию, , вы должны определить свой собственный особый стиль для :focus, в противном случае пользователям клавиатуры будет сложно использовать ваш сайт.

Answer 3

Будь осторожен. Пунктирная граница является важной частью работы с клавиатурой. Он выделяет, какая ссылка будет нажата.

a:active { outline: none; }

Автор Натан Смит дает более подробное обсуждение этого и различных связанных с ним вопросов в своем блоге.

Answer 4

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

Answer 5

Попробуйте с этим CSS:

Для Mozilla :

|:-moz-any-link:focus { outline: none; }

|:focus { outline: none; }

button, input[type="reset"], input[type="button"], input[type="submit"] { outline: none; }

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px 2px 0px 2px; border: 1px dotted transparent; }

---

Для IE8 :

a:active, a:focus { 
    border:none;
    outline:none;
}

Answer 6

Решение в JavaScript для удаления активной границы по ссылкам во всех браузерах: добавить событие onfocus = "this.blur ();" в вашей ссылке

<a href="#" onfocus="this.blur()"> Link </a>

ПРИМЕЧАНИЕ: это будет работать во всех браузерах.

Answer 7

{ outline: none; } нарушает удобство использования клавиатуры. И селектор a:active {}, кажется, сломал его так же хорошо, как в прошлый раз, когда я проверял в Firefox.

Существует способ JS избавиться от границы, ничего не нарушая, а также код JS, позволяющий избавиться от границы в IE6 и IE7.

Я описал метод в моем уроке .

Answer 8

Это работает лучше всего для меня

a{
  outline: 0;
}

Answer 9

a:focus, *:focus {
    noFocusLine: expression(this.onFocus=this.blur());
}

взято отсюда: http://www.cssjunction.com/css/remove-dotted-border-in-ie7/

Answer 10

Я хотел, чтобы это сработало для Баттона, и это сработало для меня

button { 

    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;    
    background-color: transparent;
    noFocusLine: expression(this.onFocus=this.blur());
}