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

Коли ми використовуємо заміну тексту за допомогою CSS і даємо негативний відступ тесту, тобто text-indent:-9999px. Тоді, коли ми натискаємо на це посилання, пунктирна лінія з’являється, як на прикладі зображення нижче. Яке рішення для цього?

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

a {outline : none;}

Видалити контур із посилання на зображення

a img {outline : none;}

Видалити межу із посилання на зображення

img {border : 0;}

Ви можете використовувати властивість CSS "контур" і значення "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 ... Клацнувши на введенні 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 (можливо, вам знадобиться! важливо, залежно від того, як це застосовується)

Використовуйте як це для 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" до вашого тегу IMG HTML запобіжить появі межі зображення навколо зображення.

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

img {стиль кордону: немає; }

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

Я б запропонував створити окрему таблицю StyleSheet (наприклад, використовувати плагін " 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}якщо у вас все ще є найкращий варіант, поділіться