Активные тексты гиперссылок выделены пунктирной рамкой. При использовании эффектов для таких гиперссылок (fadeIn/fadeOut) он вызывает странные эффекты. Как отключить/удалить пунктирную границу?
Как удалить пунктирную границу вокруг активных гиперссылок в IE8 с помощью CSS
Ответ 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>
ПРИМЕЧАНИЕ. Это будет работать во всех браузерах.
Ответ 8
a:focus, *:focus {
noFocusLine: expression(this.onFocus=this.blur());
}
Взято отсюда: http://www.cssjunction.com/css/remove-dotted-border-in-ie7/
Ответ 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; }
что это, не нужно усложнять это.