Wie kann ich den Umriss um Hyperlink-Bilder entfernen?

Wenn wir Textersetzung mit CSS verwenden und einen negativen Testeinzug geben, d text-indent:-9999px. H. Wenn wir dann auf diesen Link klicken, erscheint die gepunktete Linie wie im Beispielbild unten. Was ist die Lösung dafür?

Für Umriss für Ankertag entfernen

a {outline : none;}

Umriss vom Bildlink entfernen

a img {outline : none;}

Rand vom Bildlink entfernen

img {border : 0;}

Sie können die CSS-Eigenschaft "Gliederung" und den Wert "Keine" für das Ankerelement verwenden.

a {
outline: none;
}

Hoffentlich hilft das.

Für Internet Explorer 9:

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

Quelle: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

Bitte beachten Sie, dass die Fokusstile aus einem bestimmten Grund vorhanden sind: Wenn Sie sie entfernen möchten, wissen Personen, die nur über die Tastatur navigieren, nicht mehr, worauf es ankommt, sodass Sie die Zugänglichkeit Ihrer Website beeinträchtigen.

(Wenn Sie sie an Ort und Stelle halten, können Sie auch Power-User unterstützen, die ihre Maus nicht gerne verwenden.)

In Firefox und Internet Explorer (IE) gibt es denselben Randeffekt , der sichtbar wird, wenn Sie auf einen Link klicken.

Dieser Code behebt nur IE:

a:active { outline: none; }.

Und dieser wird sowohl Firefox als auch IE reparieren :

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

Der letzte Code sollte Ihrem Stylesheet hinzugefügt werden, wenn Sie die Linkränder von Ihrer Site entfernen möchten.

Fügen Sie diesen Code in Ihr Stylesheet ein

img {border : 0;}

a img {outline : none;}

Ich hoffe, dies ist für einige von Ihnen nützlich. Es kann verwendet werden, um Umrisse von Links, Bildern und Flash sowie von MSIE 9 zu entfernen:

    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 */
    }

Der folgende Code kann den Bildrand ausblenden:

    img {
    border: 0;
    }

Wenn Sie Firefox 3.6.8 unterstützen möchten, aber nicht Firefox 4 ... Wenn Sie auf einen Eingabetyp = Bild klicken, wird auch ein gepunkteter Umriss erzeugt. Um ihn in den alten Versionen von Firefox zu entfernen, reicht Folgendes aus:

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

In IE 9 ist es in einigen Fällen nicht möglich, die gepunkteten Umrisse um Links zu entfernen, es sei denn, Sie fügen dieses Meta-Tag zwischen und in Ihre Seiten ein:

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

Dies ist die neueste Version, die in Google Chrome funktioniert

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

-moz-user-focus: ignore; in Gecko-basierten Browsern (möglicherweise benötigen Sie! wichtig, je nachdem, wie es angewendet wird)

Verwenden Sie Like This für HTML 4.01

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

Sie können overflow:hiddenmit dem Texteinzug auf die Eigenschaft setzen , und die gepunktete Linie, die sich über die Seite erstreckt, verschwindet.

Ich habe ein paar Beiträge über das Entfernen von Konturen gesehen. Seien Sie dabei vorsichtig, da Sie die Zugänglichkeit der Website beeinträchtigen können.

a:active { outline: none; }

Ich persönlich würde dieses Attribut nur verwenden, da das :hoverAttribut , wenn es dieselben CSS-Eigenschaften hat, verhindert, dass die Umrisse für Personen angezeigt werden, die die Tastatur für die Navigation verwenden.

Hoffe das löst dein Problem.

Um den Dotted Outline href-Link zu entfernen, können Sie in Ihre CSS-Datei schreiben:

a {
   outline: 0;
}

Ich würde wetten, dass die meisten Benutzer nicht die Art von Benutzer sind, die die Tastatur als Navigationssteuerung verwenden. Ist es dann akzeptabel, die Mehrheit Ihrer Benutzer für eine kleine Gruppe zu ärgern, die die Tastaturnavigation bevorzugt? Kurze Antwort - hängt davon ab, wer Ihre Benutzer sind.

Außerdem sehe ich diese Erfahrung in Firefox und Safari nicht auf die gleiche Weise. Dieses Argument scheint also hauptsächlich für den Internet Explorer zu gelten. Es hängt wirklich von Ihrer Benutzerbasis und ihrem Kenntnisstand ab - wie sie die Website nutzen.

Wenn Sie wirklich wissen möchten, wo Sie sich befinden und Tastaturbenutzer sind, können Sie beim Durchlaufen der Site jederzeit die Statusleiste anzeigen.

Das funktioniert perfekt für mich

a img {border:none;}

Jedes Bild mit einem Link hat einen Rand um das Bild, um anzuzeigen, dass es sich um einen Link zu älteren Browsern handelt. Durch Hinzufügen von border = "0" zu Ihrem IMG-HTML-Tag wird verhindert, dass das Bild einen Rand um das Bild hat.

Das Hinzufügen von border = "0" zu jedem Bild wäre jedoch nicht nur zeitaufwändig, sondern erhöht auch die Dateigröße und die Downloadzeit. Wenn Sie nicht möchten, dass eines Ihrer Bilder einen Rahmen hat, erstellen Sie eine CSS-Regel oder eine CSS-Datei mit dem folgenden Code.

img {Rahmenstil: keine; }}

Wenn die obige Lösung für niemanden funktioniert. Probieren Sie es auch aus

a {
 box-shadow: none;
}

Ich bin mir nicht sicher, ob dies immer noch ein Problem für diese Person ist, aber ich weiß, dass es für viele Menschen im Allgemeinen schmerzhaft sein kann. Zugegeben, die oben genannten Lösungen funktionieren in einigen Fällen, aber wenn Sie beispielsweise ein CMS wie WordPress verwenden und die Konturen entweder von einem Plugin oder einem Thema generiert werden, wird dieses Problem höchstwahrscheinlich nicht behoben wie Sie das CSS hinzufügen.

Ich würde vorschlagen, ein separates StyleSheet zu verwenden (verwenden Sie beispielsweise das Plugin ' Lazyest StyleSheet ') und das folgende CSS einzugeben, um den vorhandenen Plugin- (oder Theme-) erzwungenen Stil zu überschreiben:

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

Wenn Sie der spezifischen Regel ' ! Important ' hinzufügen, wird dies zu einer Priorität, die generiert werden soll, auch wenn sich die Regel an einer anderen Stelle befindet (unabhängig davon, ob sie sich in einem Plugin, einem Thema usw. befindet).

Dies spart Zeit bei der Entwicklung. Natürlich können Sie nach der Originalquelle suchen, aber wenn Sie an vielen Projekten arbeiten oder Aktualisierungen durchführen müssen (bei denen Ihre Änderungen überschrieben werden können [ nicht empfohlen! ]) Oder neue Plugins oder Themen hinzufügen müssen, ist dies die beste Zeit sparen.

Hoffe das hilft ... Frieden!

Ja, wir können verwenden. CSS als a {outline:none}und auch zurückgesetzt

a:focus, a:active {outline:none} für die Best Practice in Zurücksetzen CSS, die beste Lösung ist , mit gemeinsamen :focus{outline:none}Wenn Sie noch beste Option haben , bitte teilen