улевойВот иногда бывало время сверстаешь сайт, с иголочки всё, протестишь во всех браузерах (по желанию читаем статью про кроссбраузерность), и всё кажется в ажуре и шоколаде. Но вот в Firefox в глаза попадает следующая вещь – вокруг некоторых ссылок или изображений при клике/выделении появляется уёбищная сволочная неприятная пунктирная рамка, которая портит весь тот самый ажур и шоколад.
Данная вещь существует не только в Firefox, но и в некоторых Internet Explorer’ах. Ну назвать её раздражающей это мало. Однако. Однако убирается она всего лишь одной строкой в CSS:
/*или*/
a, img { outline: 0; }
Однако этот вариант не единственный, хотя бесспорно лучший. Раньше пунктирную рамку можно было убрать при помощи javascript. Для этого каждому тегу ссылки надо было приписать onclick="this.blur();. Но с приходом CSS2 эта вещь отпала. И к счастью=).
UPD: Недавно использовал плагин jQuery под названием jScroll, который позволяет делать блоки контента на сайте с красивооформленной полосой прокрутки. Так вот, в Firefox и Chrome при клике на тот контейнер (div), на который плагин ставит полосу прокрутки, происходит его выделение в первом случае пунктирной рамкой, а во втором случае жёлтой линией. И чтобы это убрать, недолго думая я всем дивам прописал нулевой оутлайн. И было мне большое счастье=).
(голосов: 7, средний: 3.57 из 5)
Загрузка ...
11/12/2009 at 23:53 Постоянная ссылка Цитировать
Привет. В общем спасибо за полезную информацию, но есть вопрос.
Можно ли все это отключить в настройках самого браузера, поскольку очень бесит эта фигнюшка…
12/12/2009 at 0:11 Постоянная ссылка Цитировать
Можно, но для веб-разработок я бы оставил=).
В общем нужно в адресной строке набрать (копипаст не работает, именно набрать надо) abоut:config и согласиться быть осторожными в изменениях. Через фильтр надо выбрать параметр browser.display.focus_ring_width и поставить ему значение 0 (двойной клик по значению)
12/12/2009 at 0:21 Постоянная ссылка Цитировать
Спасибо огромное! Сегодня убил часов шесть — не меньше —, пока искал значение этой функции в конфигах
12/12/2009 at 0:22 Постоянная ссылка Цитировать
аахаха, иногда случается=)
если что пиши, спрашивай, чем сможем – поможем=)
31/01/2010 at 16:49 Постоянная ссылка Цитировать
Здорово получилось,теперь пунктиры ничего не портят)))Спасибо большое))
31/01/2010 at 23:18 Постоянная ссылка Цитировать
Пожалуйста
Не забудь подписаться на RSS
02/03/2010 at 0:36 Постоянная ссылка Цитировать
Спасиб.)
02/03/2010 at 0:40 Постоянная ссылка Цитировать
пажалст =)
27/04/2010 at 19:10 Постоянная ссылка Цитировать
ложь, галдеж и провокация
все поколение IE благополучно забивает на этот outline
27/04/2010 at 20:47 Постоянная ссылка Цитировать
ничего подобного. не помню насчёт 6 и 7, но то что в 8 работает – сто пудов. проверял неоднократно.
в хроме тоже отключается без вопросов.
27/04/2010 at 20:49 Постоянная ссылка Цитировать
6, 7 не пашет
помогло outline:expression(hideFocus=’true’);
27/04/2010 at 21:01 Постоянная ссылка Цитировать
мм, обычно от обводки избавляются на обычных ссылках a, потому что она там не в тему зачастую. в 6-7 ишаке вроде на ссылку оутлайн не добавляется. тогда для какого именно элемента её пришлось убирать?
14/10/2010 at 4:16 Постоянная ссылка Цитировать
Dasha права. outline:0 не помогает на IE8, а ее способ помогает
27/10/2010 at 21:47 Постоянная ссылка Цитировать
Спасибо большое за статью, в IE8 у меня нормально прошло. Често ,говоря, уже эту обводку хорошими словами тоже назвать не могла….
27/10/2010 at 22:07 Постоянная ссылка Цитировать
пожалуйста. а эта обводка действительно не пришей кобыле зад.
29/12/2010 at 18:48 Постоянная ссылка Цитировать
В 64-х рзрядном IE8 никак зараза не хочет убираться, одно радует, что таких компов пока не много
29/12/2010 at 19:19 Постоянная ссылка Цитировать
да не, 8 ишаков достаточно. но скоро девятка будет, забудем об этом как о страшном сне
19/06/2011 at 21:50 Постоянная ссылка Цитировать
когда делал сайт для заказчика, то даже с начала и не обращал на это, так как в основном все тестирую на фоксе. И был весьма удивлен появлению этой рамки на якорях у осликов..
в 8ке и 7ке избавился через {outline: none; }
проверки на 6ке и 9ке нет возможности….
19/06/2011 at 22:28 Постоянная ссылка Цитировать
вроде бы оутлайн и шестёрке помогает. если нет – то и шла бы эта шестёрка лесом=)
а вот девятка.. это незадача прям какая-то
19/06/2011 at 22:38 Постоянная ссылка Цитировать
да… особенно отсутствие поддержки ХР и border-radius & border-shadow… ))
до сих пор не могу понять почему у клиента все через **** показывается, а не онлайн-тестерах IE (вроде этого) все нормально.. причем на висте….
если у кого то есть возможность показать скрины на широкоформате с вистой и осликом 9 версии плизззз напишите на мыло (cyberkatze (sabaka) yandex.ru) буду весьма признателен в вашей помощи….
15/12/2011 at 22:57 Постоянная ссылка Цитировать
В IE7 рамка не убивается никак. Пробовал и outline и border-style, border никак! Кто знает как убить эту рамку, плиз, отпишитесь! Весь гугл обшарил, кроме вышеперечисленных способов никто ничего не предлагает…
16/12/2011 at 1:25 Постоянная ссылка Цитировать
Приведи код сss и html в том месте где у тебя проблема! в ie7 тестировал.. ничего нет! )
16/12/2011 at 9:33 Постоянная ссылка Цитировать
Да, было бы неплохо код посмотреть, т.к. вопрос где и как здесь вполне актуален – это же ишак =)
09/01/2012 at 19:31 Постоянная ссылка Цитировать
Dasha пишет:
Dasha, я Вас люблю!
Для долбанного ie8 в режиме совместимости подошел только Ваш вариант!
Правда я его скопипастил, а кавычки не заменил, они тут какие-то нестандартные.
Исправил на обычные и О, чудо!
09/01/2012 at 19:44 Постоянная ссылка Цитировать
Кстати с выключенным режимом совместимости ie8, достаточно
a {outline: none;}
26/04/2012 at 19:16 Постоянная ссылка Цитировать
Спасибо!
27/04/2012 at 11:00 Постоянная ссылка Цитировать
Незачто!=)
20/10/2012 at 12:31 Постоянная ссылка Цитировать
Убейте создателя IE браузера! самый долбанутый браузер!!!! на мобильном браузеры работают лучше чем он
10/11/2012 at 18:09 Постоянная ссылка Цитировать
Не работает в Firefox, один фиг рамка вокруг ссылки
13/01/2013 at 1:14 Постоянная ссылка Цитировать
Блин, а вот в IE 10 вообще ничем не могу убрать это выделение ((
02/04/2013 at 12:36 Постоянная ссылка Цитировать
Александр Шуйский спасибо за помощь с about:config избавилась от этой ужасной)) рамки)) И теперь все гладенько и классно отображается). Отмечу что Ваш метод один из 20 которые я видела, самый понятный и доступный
03/04/2013 at 8:42 Постоянная ссылка Цитировать
2Viki, спасибо большое, приятно слышать =)
03/05/2013 at 22:14 Постоянная ссылка Цитировать
outline в ИЕ 7-8 помог убрать тег:
a, input {outline:expression(hideFocus=’true’);}
Добавил его в резет
Спасибо.
27/05/2013 at 10:58 Постоянная ссылка Цитировать
Привет!
У меня вот проблема.
Надо у тега
<input type=”submit”>
убрать эту пунктирную (чертову…зачем ее придумали, не понимаю) рамку в фаерфоксе.
Пробовала использовать outline:none с псевдоклассом :focus…ничего не вышло.
Может, есть для этого какое-то решение?
27/05/2013 at 11:00 Постоянная ссылка Цитировать
Привет!
Нужно без псевдокласса, и нужно проверить указан ли доктайп у файла.
01/06/2013 at 3:45 Постоянная ссылка Цитировать
а как влияет на это доктайп?
05/06/2013 at 10:53 Постоянная ссылка Цитировать
(с) htmlbook
12/07/2013 at 18:53 Постоянная ссылка Цитировать
СПАСИБО, а то везде бред написан.
13/07/2013 at 11:50 Постоянная ссылка Цитировать
Пожалуйста, рад был помочь!