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

Question

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

Answer 1

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

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

a:active { outline: none; }

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

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

Answer 2

для удаления ссылки Href The Dotted Outline вы можете написать в своем файле css:

a {
   outline: 0;
}

Answer 3

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

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

img {border-style: none; }

Answer 4

Это прекрасно работает для меня

a img {border:none;}

Answer 5

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

---

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

Answer 6

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

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

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

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

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

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

Answer 7

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

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

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