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

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

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

a {outline : none;}

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

a img {outline : none;}

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

img {border : 0;}

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

a {
outline: none;
}

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

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

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

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

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

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

a:active { outline: none; }.

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

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

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

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

img {border : 0;}

a img {outline : none;}

Я надеюсь, что это будет полезно для некоторых из вас, его можно использовать для удаления контура из ссылок, изображений и флэш-памяти, а также из 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" />

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

:link:focus, :visited:focus {outline: none;}

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

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

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

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

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

a:active { outline: none; }

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

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

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

a {
   outline: 0;
}

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

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

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

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

a img {border:none;}

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

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

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

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

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

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

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

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

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

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

a {
 box-shadow: none;
}

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

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