Как удалить контур вокруг изображений гиперссылок?

97

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

введите описание изображения здесь

Васим Шейх
источник
3
Пожалуйста, не удаляйте это, это сделано для удобства.
Дубликат: stackoverflow.com/questions/1142819/… (но, пожалуйста, см. Комментарии о специальных возможностях выше!)
JohnB
Я попал на это, используя неправильный поисковый запрос. Я рекомендую всем, кто читает это, также знать об этом подчеркивании в IE
Дж. Галлардо,

Ответы:

168

Для Удалить схему для тега привязки

a {outline : none;}

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

a img {outline : none;}

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

img {border : 0;}
Обнаружить
источник
1
Спасибо, Discover. Меня это беспокоило долгое время - не только картинки с гиперссылками в IE, но и обычные картинки без гиперссылок. Это меня раздражало, пока я не нашел ваш ответ (как ни странно, через Google, а не через Stack).
Джейсон Вебер
25

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

a {
outline: none;
}

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

Дин Бердж
источник
17

Для 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

Натан Мойнвазири
источник
Это единственный вариант, когда он работает в IE должным образом, хотя вызывает мерцание страницы при загрузке.
Алексей Теницкий 01
9

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

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

Wolfr
источник
Мы не удаляем стиль: focus. просто добавление стилей: нет. другой стиль по умолчанию будет там.
Васим Шейх
1
Что же тогда такое «другой стиль по умолчанию»? Насколько я знаю, есть только одна пунктирная линия.
Wolfr
1
Хорошо .. Может быть, мы можем использовать стиль Diffrent для чтения с экрана. это может быть решение для доступности.
Васим Шейх
План используют не только программы чтения с экрана, некоторым людям также нравится просматривать веб-сайты с помощью клавиатуры.
user2019515 05
8

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

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

a:active { outline: none; }.

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

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

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

Майк
источник
1
Спасибо, Майк, это действительно хороший ответ. но Использование -moz-outline-style: none; не является действительным CSS. Тем не менее, это хороший вариант
Васим Шейх
5

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

img {border : 0;}

a img {outline : none;}
Роко С. Бульян
источник
3

Я надеюсь, что это будет полезно для некоторых из вас, его можно использовать для удаления контура из ссылок, изображений и флэш-памяти, а также из 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 ... При нажатии на input type = image также может появиться пунктирный контур, чтобы удалить его в старых версиях firefox, выполните следующие действия:

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

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

     <meta http-equiv="X-UA-Compatible" content="IE=9" />
ягб
источник
@Sparky Я считаю, что мы должны предложить ответ, который отвечает на вопрос, рассказав, как это сделать в большинстве используемых браузеров, включая MSIE, поскольку это был широко используемый браузер в 2014 году, а также информацию о метатеге MS и CSS, которые можно использовать для Только MSIE Это была лишь часть моего ответа, чтобы предложить поддержку для большинства браузеров, включая MSIE ... Вопрос был НЕ о W3C Valid HTML или CSS ...
jagb
@Sparky +1, потому что это правда, и мы никогда не должны доверять MS css / html / meta-тегам, поскольку они редко думают о стандартах W3C .... Я не сказал, что хорошо использовать метатеги Microsoft и их код CSS в качестве Единственный браузер, поддерживающий код MS, - это MSIE и связанные с ним браузеры MS. В качестве запрошенного ответа на вопрос «Как удалить контур вокруг изображений гиперссылок?»
jagb 05
Я просто сделал комментарий, изложив свои наблюдения.
Sparky
Однако мне было интересно, можете ли вы процитировать источник для вашего утверждения, что этот метатег необходим «в некоторых случаях» ; и что это за случаи.
Sparky
Пожалуйста, прочтите веб-сайт Microsoft для получения некоторой, но не всей информации ... здесь много вопросов о переполнении стека, некоторые из вопросов могут быть перечислены рядом с этим вопросом на правой панели ... в некоторых случаях MSIE / EDGE не может отображать содержимое страницы, поскольку браузер не поддерживает его, в «некоторых случаях» метатег X-UA-Compatible полезен для посетителей MSIE / EDGE. есть дополнительная информация, исправление, которое будет работать, здесь. Надеюсь, это будет для вас полезной информацией
jagb
3

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

:link:focus, :visited:focus {outline: none;}
Самбрус Сэм
источник
1

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

Анонимный
источник
1

Используйте Like This для HTML 4.01

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

151291
источник
1

Вы можете нанести overflow:hiddenна свойство текстовый отступ, и пунктирная линия, выходящая за пределы страницы, исчезнет.

Я видел пару сообщений об удалении контуров сразу. Будьте осторожны при этом, так как вы можете снизить доступность сайта.

a:active { outline: none; }

Лично я бы использовал только этот атрибут, как если бы :hoverатрибут имел те же свойства css, он предотвратит отображение контуров для людей, которые используют клавиатуру для навигации.

Надеюсь, это решит вашу проблему.

Аксу
источник
1

Чтобы удалить ссылку href с пунктирным контуром, вы можете написать в своем файле css:

a {
   outline: 0;
}
БЕРГУИГА Мохамед Амин
источник
0

Я готов поспорить, что большинство пользователей не из тех пользователей, которые используют клавиатуру в качестве элемента управления навигацией. Тогда приемлемо ли раздражать большинство ваших пользователей небольшой группой, которая предпочитает использовать навигацию с клавиатуры? Короткий ответ - зависит от того, кто ваши пользователи.

Кроме того, я не вижу такого же опыта в Firefox и Safari. Так что этот аргумент, похоже, в основном касается IE. Все действительно зависит от вашей базы пользователей и их уровня знаний - как они используют сайт.

Если вы действительно хотите знать, где вы находитесь, и вы пользуетесь клавиатурой, вы всегда можете посмотреть на строку состояния, когда вы переходите по сайту.

Dwall
источник
0

Это отлично работает для меня

a img {border:none;}

Si-
источник
0

Любое изображение, имеющее ссылку, будет иметь рамку вокруг изображения, чтобы указать, что это ссылка в старых браузерах. Добавление border = "0" в ваш HTML-тег IMG предотвратит появление границы вокруг изображения.

Однако добавление border = "0" к каждому изображению не только займет много времени, но также увеличит размер файла и время загрузки. Если вы не хотите, чтобы какие-либо из ваших изображений имели границу, создайте правило CSS или файл CSS, содержащий приведенный ниже код.

img {стиль границы: нет; }

Шерияр Низар
источник
0

Я не уверен, что это все еще проблема для этого человека, но я знаю, что это может быть болезненным для многих людей в целом. Конечно, вышеуказанные решения будут работать в некоторых случаях, но если вы, например, используете CMS, такую ​​как WordPress, и контуры генерируются либо плагином, либо темой, вы, скорее всего, не решите эту проблему, в зависимости от как вы добавляете CSS.

Я бы предложил создать отдельную таблицу стилей (например, использовать плагин Lazyest StyleSheet ) и ввести в нее следующий CSS, чтобы переопределить существующий стиль, усиленный плагином (или темой):

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

Добавление " ! Important " к определенному правилу сделает его приоритетным для генерации, даже если правило может быть где-то еще (будь то плагин, тема и т. Д.).

Это помогает сэкономить время при разработке. Конечно, вы можете найти исходный источник, но когда вы работаете над множеством проектов или вам нужно выполнить обновления (где ваши изменения могут быть отменены [ не рекомендуется! ]) Или добавить новые плагины или темы, это лучший вариант. возможность сэкономить время.

Надеюсь, это поможет ... Мир!

Роджер Санчес
источник
0

Если вышеприведенное решение ни для кого не работает. Попробуйте и это

a {
 box-shadow: none;
}
Виджайендра Шах
источник
-9

Да, мы можем использовать. Сброс CSS как a {outline:none}и также


a:focus, a:active {outline:none} для лучшей практики сброса CSS: Лучшее решение - использовать обычный. :focus{outline:none}Если у вас все еще есть лучший вариант, поделитесь

Васим Шейх
источник
20
Разве не грубо не принять один из других ответов, содержание которых привело вас к такому выводу?
Пекка