По умолчанию, при нажатии или получении фокуса у ссылок появляется внешняя пунктирная линия. Такое поведение обеспечивает доступность. Для людей с ограниченными возможностями, которые не имеют возможности пользоваться мышью необходим индикатор того, что ссылка активна и они могут нажать «Enter» для перехода.
Обычно появление такой линии не вызывает проблем. Линия отображается всего несколько секунд перед загрузкой новой страницы.
Внешняя линия похожа на свойство border, но имеет два основных отличия. Во-первых, нет возможности оперировать внешней линией каждой отдельной стороны, контейнера. Во-вторых, внешняя линия не является частью модели контейнера и не влияет на его ширину. Так что появление внешней линии не повлияет на структуру страницы.
Если вы хотите ликвидировать внешнюю линию у каждой ссылки, просто примените следующее объявление:
a { outline:none; }
Обычно лучше оставлять поведение ссылок по умолчанию. Но бывают случаи когда ее лучше убрать. Например, когда ссылка имеет достаточно большие внутренние отступы, появление внешней линии может выглядеть не лучшим образом. Или же, если при нажатии на ссылку происходит запуск скрипта на javascript, то внешняя линия не исчезнет пока вы не нажмете куда-нибудь еще.
Поскольку внешняя линия обеспечивает доступность сайта, необходимо прописать стили для всех состояний ссылки. Лучше всего сделать стили ссылок в активном состоянии и при получении фокуса такими же как и при наведении указателя:
a:hover, a:active, a:focus { ... }
UPD: Как выяснилось, браузер IE ниже версии 8b не поддерживает свойство outline и соответственно убрать внешнюю линию не получится.
Источник: Removing The Dotted Outline
Loading ...
Данный трюк не работает в IE <8b.
Эрик Мейер рекомендует использовать данное свойство при тестировании вёрстки. Именно по причине независимости блочной модели от outline.
Давненько писал про этот CSS для проверки. А насчет того что пример не работает в IE ниже 8b странно. Проверял в IE6,7.
outline работает в IE 8b(+) : http://www.quirksmode.org/css/contents.html
Alex, поделитесь секретом как всё же это работало в IE6, 7 ?
Я говорю в контексте приведенного примера, т.е. убрать пунктирную линию у ссылок можно и в IE ниже 8b. Я так полагаю, что вы имеете ввиду, то что нельзя каким-либо образом оформлять эту линию у элементов в этих браузерах. Про это я вроде и не писал.
Все таки вы правы. Не работает пример в IE ниже 8b. Проверял в программе IETester и там почему-то линия пропадает. Все таки IETester не полностью ведет себя как IE…
Блин. как здесь хтмыл код постить? Короче, с помощью жс на онфокус нужно делать blur();
О. Огромное спасибо. Меня из за этого аутлайна года два назад чуть не уволили. Я доказывал начальнику что убрать его невозможно, только меня никто не слышал.
ANDREY, спасибо скажите комментаторам. Я до недавнего времени думал, что её таки можно убрать везде.
В IE6+ есть атрибут hidefocus у тэга A (http://msdn.microsoft.com/en-us/library/ms533783.aspx).
[...] Избавляемся от пунктирной линии По умолчанию, при нажатии или получении фокуса у ссылок появляется внешняя пунктирная линия. Такое поведение обеспечивает доступность. Для людей с ограниченными возможностями, которые не имеют возможности пользоваться мышью необходим индикатор того, что ссылка активна и они могут нажать «Enter» для перехода… [...]
Убрать можно таким незатейливым методом. Точно работает на IE 7 и FF 3.0.8 ))
a.menu, a.menu:active, a.menu:visited, a.menu:focus, a.menu:hover {
text-decoration:none;
outline:0px;
ie-dummy:expression(this.hideFocus=true);}
спасибо за способ
оно конечно не мешает особливо, но иногда придирчивый взгляд падает
в Опера слошой линией обводит submit кнопку, при фокусе на форме.
Знает кто как убрать обводку?