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

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

Ответ 1

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

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

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

Примечание

Вышеописанное не работает в IE 9. Извлечение a: select заставляет его работать в IE9.

Ответ 2

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

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

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

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

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

Ответ 3

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

a:active { outline: none; }

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

Ответ 4

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

Ответ 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;
}

Ответ 6

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

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

Я описал метод в мой учебник.

Ответ 7

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

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

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

Ответ 9

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

a{
  outline: 0;
}

Ответ 10

Мне захотелось заставить эту работу работать с Button, и это сработало для меня

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

Ответ 11

вы также можете использовать контур: 0 на объекте и встраивать. некоторый базовый обнуление css будет выглядеть следующим образом:

a, a:visited { 
    text-decoration:none;
    color: #e3a512; 
    }
a:hover, a:active, a:focus { 
    text-decoration:none;
    color: #fff;
    outline:0;
    }
object, embed, a, a img, a:active, a:selected, a:visited {
    outline:0
    }

Ответ 12

a img {border: none; }

что это, не нужно усложнять это.