Как я могу удалить контур вокруг изображений гиперссылок? - PullRequest
89 голосов
/ 02 мая 2009

Когда мы используем замену текста с использованием CSS и даем отрицательный тест-отступ, т.е. text-indent:-9999px. Затем, когда мы нажимаем на эту ссылку, пунктирная линия появляется, как на примере изображения ниже. Какое решение для этого?

enter image description here

Ответы [ 17 ]

148 голосов
/ 14 февраля 2011

для удаления контура для тега привязки

a {outline : none;}

Удалить контур из ссылки на изображение

a img {outline : none;}

Удалить границу из ссылки на изображение

img {border : 0;}
22 голосов
/ 02 мая 2009

Вы можете использовать CSS-свойство "outline" и значение "none" для элемента привязки.

a {
outline: none;
}

Надеюсь, это поможет.

17 голосов
/ 25 января 2012

Для Internet Explorer 9:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

Источник: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

9 голосов
/ 03 мая 2009

Обратите внимание, что стили фокуса присутствуют по определенной причине: если вы решите удалить их, люди, которые перемещаются с помощью клавиатуры, больше не знают, что находится в фокусе, поэтому вы нарушаете доступность своего сайта. 1001 *

(Сохранение их на месте также помогает опытным пользователям, которые не любят пользоваться мышью)

7 голосов
/ 02 мая 2009

В Firefox и Internet Explorer (IE) есть такой же эффект границы, он становится видимым при нажатии на какую-либо ссылку.

Этот код исправит только IE:

a:active { outline: none; }.

А этот исправит и Firefox, и IE :

:active, :focus { outline: none; -moz-outline-style: none; }

Последний код должен быть добавлен в вашу таблицу стилей, если вы хотите удалить границы ссылок с вашего сайта.

5 голосов
/ 22 августа 2013

включить этот код в таблицу стилей

img {border : 0;}

a img {outline : none;}
3 голосов
/ 26 мая 2014

Я надеюсь, что это будет полезно для некоторых из вас, его можно использовать для удаления контуров из ссылок, изображений и флэш-памяти, а также из MSIE 9:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

Код ниже может скрыть границу изображения:

    img {
    border: 0;
    }

Если вы хотите поддерживать Firefox 3.6.8, но не Firefox 4 ... Нажатие на тип ввода = изображение может также привести к пунктирному контуру, чтобы удалить его в старых версиях Firefox, следующее будет делать трюк:

   input::-moz-focus-inner { 
   border: 0; 
   }

IE 9 не позволяет в некоторых случаях удалять пунктирный контур вокруг ссылок, если вы не включите этот метатег между и на своих страницах:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />
2 голосов
/ 01 декабря 2015

Это последняя версия, которая работает в Google Chrome

:link:focus, :visited:focus {outline: none;}
1 голос
/ 24 ноября 2013

Используйте как это для HTML 4.01

<img src="image.gif" border="0">

1 голос
/ 02 мая 2009

-moz-user-focus: ignore; в браузерах на основе Gecko (может понадобиться! Важно, в зависимости от того, как он применяется)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...