Как убрать пунктирную рамку вокруг ссылок в FireFox?

Привет, уважаемые читатели! Продолжаю, на страницах данного блога, делиться с вами своим опытом верстки и разработки сайтов. И в этой небольшой статье хочется рассказать вам о том, как убрать пунктирную рамку вокруг ссылок при клике (а точнее при получении фокуса). О чем собственно говоря речь? Давайте по подробней!

В некоторых браузерах, в частности таком популярном браузере как FireFox, можно обнаружить некую особенность, а именно то, что при клике на ссылку или кнопку, в элемента, при получении фокуса (то есть сразу после клика) появляется небольшая пунктирная рамка, вот как это выглядит:

line-dashed-linkСогласитесь, смотрится не очень, особенно сильно такая рамка бросается в глаза, когда кликаешь по большом заголовке в которого свойство line-height задано меньше чем установлено по умолчанию, что приводит к тому что пунктирные линии пересекаются.

dashed-lineКак же побороть эту проблему? Вы удивитесь насколько все просто, решается эта задача буквально несколькими строчками кода:

a:focus{
    outline:none;
}

Здесь мы для всех ссылок, которые получают фокус задаем специальное свойство outline:none, точнее мы это свойство не задаем, а отменяем. Что вообще обозначает свойство outline вы можете почитать отдельно. Я лишь скажу вкратце, что данное свойство очень похоже на border, разница только в том, что рамка заданная outline не влияет на размер элемента и её (рамку) нельзя задать для какой-то одной стороны, задается она только для всего элемента.

Вот собственно и все, что нужно сделать. После того как вы сохраните свою таблицу стилей, никакой рамки при клике по ссылке уже не будет. Как видите все элементарно.

Это все, что мне хотелось вам рассказать, теперь вы знаете как убрать пунктирную рамку вокруг ссылок , надеюсь эта информация поможет вам при верстке ваших проектов. Удачи!!!