Jak mogę usunąć kontur wokół obrazów hiperłączy?

Kiedy używamy zamiany tekstu za pomocą CSS i podajemy negatywne wcięcie testu, tj text-indent:-9999px. Następnie po kliknięciu tego łącza pojawia się przerywana linia, jak na przykładowym obrazku poniżej. Jakie jest na to rozwiązanie?

Dla Usuń zarys tagu kotwicy

a {outline : none;}

Usuń kontur z linku do obrazu

a img {outline : none;}

Usuń obramowanie z linku do obrazu

img {border : 0;}

Możesz użyć właściwości CSS „outline” i wartości „none” w elemencie kotwicy.

a {
outline: none;
}

Mam nadzieję, że to pomoże.

W przypadku przeglądarki Internet Explorer 9:

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

Źródło: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

Zwróć uwagę, że style fokusu istnieją z jakiegoś powodu: jeśli zdecydujesz się je usunąć, ludzie, którzy poruszają się tylko za pomocą klawiatury, nie wiedzą już, na czym jest fokus, więc zmniejszasz dostępność swojej witryny.

(Utrzymanie ich na miejscu pomaga również zaawansowanym użytkownikom, którzy nie lubią używać myszy)

Ten sam efekt obramowania występuje w przeglądarkach Firefox i Internet Explorer (IE) , staje się widoczny po kliknięciu łącza.

Ten kod naprawi tylko IE:

a:active { outline: none; }.

A ten naprawi zarówno Firefox, jak i IE :

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

Ostatni kod należy dodać do arkusza stylów, jeśli chcesz usunąć ramki linków ze swojej witryny.

dołącz ten kod do swojego arkusza stylów

img {border : 0;}

a img {outline : none;}

Mam nadzieję, że jest to przydatne dla niektórych z Was, można go użyć do usunięcia konturu z linków, obrazów i flasha oraz z 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 */
    }

Poniższy kod może ukryć obramowanie obrazu:

    img {
    border: 0;
    }

Jeśli chcesz obsługiwać przeglądarkę Firefox 3.6.8, ale nie Firefox 4 ... Kliknięcie na typ wejściowy = obraz może również utworzyć kropkowany kontur, aby usunąć go w starszych wersjach Firefoksa, wykonaj następujące czynności:

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

IE 9 nie pozwala w niektórych przypadkach na usunięcie kropkowanego konturu wokół linków, chyba że umieścisz ten metatag między i na swoich stronach:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

To najnowszy, który działa w Google Chrome

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

-moz-user-focus: ignore; w przeglądarkach opartych na Gecko (możesz potrzebować! ważne, w zależności od tego, jak jest stosowane)

Użyj w ten sposób w przypadku HTML 4.01

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

Możesz umieścić overflow:hiddenna właściwości z wcięciem tekstu, a ta przerywana linia, która rozciąga się poza stronę, zniknie.

Widziałem kilka postów o wspólnym usuwaniu konturów. Zachowaj ostrożność, ponieważ możesz zmniejszyć dostępność witryny.

a:active { outline: none; }

Osobiście użyłbym tylko tego atrybutu, ponieważ jeśli :hoveratrybut ma te same właściwości css, zapobiegnie wyświetlaniu konturów osobom używającym klawiatury do nawigacji.

Mam nadzieję, że to rozwiązuje twój problem.

aby usunąć link href z kropkowanym konturem możesz wpisać w swoim pliku css:

a {
   outline: 0;
}

Założę się, że większość użytkowników nie jest typem użytkownika, który używa klawiatury jako elementu sterującego nawigacją. Czy w takim razie dopuszczalne jest denerwowanie większości użytkowników dla małej grupy, która woli korzystać z nawigacji za pomocą klawiatury? Krótka odpowiedź - zależy od tego, kim są Twoi użytkownicy.

Poza tym nie widzę tego samego doświadczenia w Firefoksie i Safari. Więc ten argument wydaje się być głównie dla IE. Wszystko naprawdę zależy od bazy użytkowników i ich poziomu wiedzy - sposobu, w jaki korzystają z witryny.

Jeśli naprawdę chcesz wiedzieć, gdzie jesteś i jesteś użytkownikiem klawiatury, zawsze możesz spojrzeć na pasek stanu podczas przechodzenia przez witrynę.

U mnie to działa idealnie

a img {border:none;}

Każdy obraz z łączem będzie miał obramowanie wokół obrazu, aby wskazać, że jest to łącze w starszych przeglądarkach. Dodanie border = "0" do tagu HTML IMG zapobiegnie temu, że obraz będzie miał obramowanie wokół obrazu.

Jednak dodanie border = "0" do każdego obrazu byłoby nie tylko czasochłonne, ale także zwiększy rozmiar pliku i skróci czas pobierania. Jeśli nie chcesz, aby którykolwiek z twoich obrazów miał obramowanie, utwórz regułę CSS lub plik CSS, który zawiera poniższy kod.

img {border-style: none; }

Nie jestem pewien, czy jest to nadal problem dla tej osoby, ale wiem, że może to być ból dla wielu osób w ogóle. To prawda, powyższe rozwiązania będą działać w niektórych przypadkach, ale jeśli na przykład używasz CMS, takiego jak WordPress, a kontury są generowane przez wtyczkę lub motyw, najprawdopodobniej nie rozwiążesz tego problemu, w zależności od jak dodajesz plik CSS.

Proponuję mieć osobny arkusz stylów (na przykład użyj wtyczki `` Najlżejszy arkusz stylów '') i wprowadź w nim następujący CSS, aby zastąpić istniejący styl wymuszony przez wtyczkę (lub motyw):

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

Dodanie „ ! Ważne ” do konkretnej reguły sprawi, że będzie to priorytet do wygenerowania, nawet jeśli reguła może znajdować się gdzie indziej (czy jest we wtyczce, motywie itp.).

Pomaga to zaoszczędzić czas podczas programowania. Oczywiście, możesz szukać oryginalnego źródła, ale gdy pracujesz nad wieloma projektami lub musisz wykonać aktualizacje (gdzie zmiany mogą zostać zastąpione [ nie sugerowane! ]) Lub dodać nowe wtyczki lub motywy, jest to najlepsze uciekać się do oszczędzania czasu.

Mam nadzieję, że to pomoże ... Spokój!

Jeśli powyższe rozwiązanie nie działa dla nikogo. Spróbuj również

a {
 box-shadow: none;
}

Tak, możemy użyć. CSS resetowany jako a {outline:none}i również

a:focus, a:active {outline:none} aby uzyskać najlepszą praktykę resetowania CSS, najlepszym rozwiązaniem jest użycie wspólnych. :focus{outline:none}Jeśli nadal masz najlepszą opcję, udostępnij