Как убрать выделение ссылок пунктирной рамкой в FireFox

« Предыдущая запись
 
  Следующая запись »
 

улевойВот иногда бывало время сверстаешь сайт, с иголочки всё, протестишь во всех браузерах (по желанию читаем статью про кроссбраузерность), и всё кажется в ажуре и шоколаде. Но вот в Firefox в глаза попадает следующая вещь – вокруг некоторых ссылок или изображений при клике/выделении появляется уёбищная сволочная неприятная пунктирная рамка, которая портит весь тот самый ажур и шоколад.

Данная вещь существует не только в Firefox, но и в некоторых Internet Explorer’ах. Ну назвать её раздражающей это мало. Однако. Однако убирается она всего лишь одной строкой в CSS:

a, img { outline: none; }
/*или*/
a, img { outline: 0; }

Однако этот вариант не единственный, хотя бесспорно лучший. Раньше пунктирную рамку можно было убрать при помощи javascript. Для этого каждому тегу ссылки надо было приписать onclick="this.blur();. Но с приходом CSS2 эта вещь отпала. И к счастью=).

UPD: Недавно использовал плагин jQuery под названием jScroll, который позволяет делать блоки контента на сайте с красивооформленной полосой прокрутки. Так вот, в Firefox и Chrome при клике на тот контейнер (div), на который плагин ставит полосу прокрутки, происходит его выделение в первом случае пунктирной рамкой, а во втором случае жёлтой линией. И чтобы это убрать, недолго думая я всем дивам прописал нулевой оутлайн. И было мне большое счастье=).


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 7, средний: 3.57 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 39 на запись

"Как убрать выделение ссылок пунктирной рамкой в FireFox"

  1. Привет. В общем спасибо за полезную информацию, но есть вопрос.
    Можно ли все это отключить в настройках самого браузера, поскольку очень бесит эта фигнюшка…

  2. Можно, но для веб-разработок я бы оставил=).
    В общем нужно в адресной строке набрать (копипаст не работает, именно набрать надо) abоut:config и согласиться быть осторожными в изменениях. Через фильтр надо выбрать параметр browser.display.focus_ring_width и поставить ему значение 0 (двойной клик по значению)

  3. Спасибо огромное! Сегодня убил часов шесть — не меньше —, пока искал значение этой функции в конфигах :)

  4. аахаха, иногда случается=)
    если что пиши, спрашивай, чем сможем – поможем=)

  5. Здорово получилось,теперь пунктиры ничего не портят)))Спасибо большое))

  6. Пожалуйста :)
    Не забудь подписаться на RSS ;)

  7. Спасиб.)

  8. пажалст =)

  9. ложь, галдеж и провокация
    все поколение IE благополучно забивает на этот outline

  10. ничего подобного. не помню насчёт 6 и 7, но то что в 8 работает – сто пудов. проверял неоднократно.
    в хроме тоже отключается без вопросов.

  11. 6, 7 не пашет
    помогло outline:expression(hideFocus=’true’);

  12. мм, обычно от обводки избавляются на обычных ссылках a, потому что она там не в тему зачастую. в 6-7 ишаке вроде на ссылку оутлайн не добавляется. тогда для какого именно элемента её пришлось убирать?

  13. Dasha права. outline:0 не помогает на IE8, а ее способ помогает

  14. Спасибо большое за статью, в IE8 у меня нормально прошло. Често ,говоря, уже эту обводку хорошими словами тоже назвать не могла….

  15. пожалуйста. а эта обводка действительно не пришей кобыле зад.

  16. Эльвира
    29/12/2010 at 18:48 Постоянная ссылка Цитировать

    В 64-х рзрядном IE8 никак зараза не хочет убираться, одно радует, что таких компов пока не много

  17. да не, 8 ишаков достаточно. но скоро девятка будет, забудем об этом как о страшном сне

  18. когда делал сайт для заказчика, то даже с начала и не обращал на это, так как в основном все тестирую на фоксе. И был весьма удивлен появлению этой рамки на якорях у осликов..

    в 8ке и 7ке избавился через {outline: none; }

    проверки на 6ке и 9ке нет возможности….

  19. вроде бы оутлайн и шестёрке помогает. если нет – то и шла бы эта шестёрка лесом=)
    а вот девятка.. это незадача прям какая-то

  20. а вот девятка.. это незадача прям какая-то

    да… особенно отсутствие поддержки ХР и border-radius & border-shadow… ))

    до сих пор не могу понять почему у клиента все через **** показывается, а не онлайн-тестерах IE (вроде этого http://ipinfo.info/netrenderer/) все нормально.. причем на висте….

    если у кого то есть возможность показать скрины на широкоформате с вистой и осликом 9 версии плизззз напишите на мыло (cyberkatze (sabaka) yandex.ru) буду весьма признателен в вашей помощи….

  21. В IE7 рамка не убивается никак. Пробовал и outline и border-style, border никак! Кто знает как убить эту рамку, плиз, отпишитесь! Весь гугл обшарил, кроме вышеперечисленных способов никто ничего не предлагает…

  22. Приведи код сss и html в том месте где у тебя проблема! в ie7 тестировал.. ничего нет! )

  23. Да, было бы неплохо код посмотреть, т.к. вопрос где и как здесь вполне актуален – это же ишак =)

  24. Dasha пишет:

    6, 7 не пашет
    помогло outline:expression(hideFocus=’true’);

    Dasha, я Вас люблю!
    Для долбанного ie8 в режиме совместимости подошел только Ваш вариант!
    Правда я его скопипастил, а кавычки не заменил, они тут какие-то нестандартные.
    Исправил на обычные и О, чудо!

  25. Кстати с выключенным режимом совместимости ie8, достаточно
    a {outline: none;}

  26. Спасибо!

  27. Александр Шуйский
    27/04/2012 at 11:00 Постоянная ссылка Цитировать

    Незачто!=)

  28. Убейте создателя IE браузера! самый долбанутый браузер!!!! на мобильном браузеры работают лучше чем он

  29. Не работает в Firefox, один фиг рамка вокруг ссылки

  30. Дмитрий
    13/01/2013 at 1:14 Постоянная ссылка Цитировать

    Блин, а вот в IE 10 вообще ничем не могу убрать это выделение ((

  31. Александр Шуйский спасибо за помощь с about:config избавилась от этой ужасной)) рамки)) И теперь все гладенько и классно отображается). Отмечу что Ваш метод один из 20 которые я видела, самый понятный и доступный

  32. Александр Шуйский
    03/04/2013 at 8:42 Постоянная ссылка Цитировать

    2Viki, спасибо большое, приятно слышать =)

  33. Алексей
    03/05/2013 at 22:14 Постоянная ссылка Цитировать

    outline в ИЕ 7-8 помог убрать тег:
    a, input {outline:expression(hideFocus=’true’);}

    Добавил его в резет :) Спасибо.

  34. Привет! :)
    У меня вот проблема.
    Надо у тега
    <input type=”submit”>
    убрать эту пунктирную (чертову…зачем ее придумали, не понимаю) рамку в фаерфоксе.
    Пробовала использовать outline:none с псевдоклассом :focus…ничего не вышло.
    Может, есть для этого какое-то решение?

  35. Александр Шуйский
    27/05/2013 at 11:00 Постоянная ссылка Цитировать

    Привет!
    Нужно без псевдокласса, и нужно проверить указан ли доктайп у файла.

  36. а как влияет на это доктайп?

  37. Александр Шуйский
    05/06/2013 at 10:53 Постоянная ссылка Цитировать

    Элемент < !DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать < !DOCTYPE>.

    Существует несколько видов < !DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы.

    (с) htmlbook

  38. Руслан
    12/07/2013 at 18:53 Постоянная ссылка Цитировать

    СПАСИБО, а то везде бред написан.

  39. Александр Шуйский
    13/07/2013 at 11:50 Постоянная ссылка Цитировать

    Пожалуйста, рад был помочь!

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии