Come posso rimuovere il contorno attorno alle immagini dei collegamenti ipertestuali?

Quando usiamo la sostituzione del testo usando i CSS e diamo un rientro di prova negativo, es text-indent:-9999px. Quindi, quando facciamo clic su quel collegamento, la linea tratteggiata appare come nell'immagine di esempio qui sotto. Qual è la soluzione per questo?

Per Rimuovi contorno per tag di ancoraggio

a {outline : none;}

Rimuovi contorno dal collegamento immagine

a img {outline : none;}

Rimuovi bordo dal collegamento immagine

img {border : 0;}

Puoi usare la proprietà CSS "outline" e il valore "none" sull'elemento di ancoraggio.

a {
outline: none;
}

Spero che aiuti.

Per Internet Explorer 9:

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

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

Tieni presente che gli stili di messa a fuoco esistono per un motivo: se decidi di rimuoverli, le persone che navigano tramite la tastiera non sanno più cosa è a fuoco, quindi stai danneggiando l'accessibilità del tuo sito web.

(Mantenerli in posizione aiuta anche gli utenti esperti a cui non piace usare il mouse)

C'è lo stesso effetto bordo in Firefox e Internet Explorer (IE) , diventa visibile quando fai clic su un link.

Questo codice risolverà solo IE:

a:active { outline: none; }.

E questo risolverà sia Firefox che IE :

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

L'ultimo codice dovrebbe essere aggiunto nel tuo foglio di stile, se desideri rimuovere i bordi del link dal tuo sito.

includi questo codice nel tuo foglio di stile

img {border : 0;}

a img {outline : none;}

Spero che questo sia utile ad alcuni di voi, può essere usato per rimuovere contorni da link, immagini e flash e da 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 */
    }

Il codice seguente è in grado di nascondere il bordo dell'immagine:

    img {
    border: 0;
    }

Se desideri supportare Firefox 3.6.8 ma non Firefox 4 ... Fare clic su un input type = image può anche produrre un contorno tratteggiato, per rimuoverlo nelle vecchie versioni di firefox il seguente farà il trucco:

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

IE 9 non consente in alcuni casi di rimuovere il contorno tratteggiato attorno ai collegamenti a meno che non includa questo meta tag tra e nelle tue pagine:

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

Questo è l'ultimo che funziona su Google Chrome

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

-moz-user-focus: ignore; nei browser basati su Gecko (potrebbe essere necessario! importante, a seconda di come viene applicato)

Usa così per HTML 4.01

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

Puoi inserire overflow:hiddenla proprietà con il rientro del testo e quella linea tratteggiata, che si estende fuori dalla pagina, scomparirà.

Ho visto un paio di post sulla rimozione dei contorni tutti insieme. Fai attenzione quando lo fai perché potresti ridurre l'accessibilità del sito.

a:active { outline: none; }

Personalmente utilizzerei solo questo attributo, poiché se l' :hoverattributo avesse le stesse proprietà CSS, impedirebbe la visualizzazione dei contorni per le persone che utilizzano la tastiera per la navigazione.

Spero che questo risolva il tuo problema.

per rimuovere il link href The Dotted Outline puoi scrivere nel tuo file css:

a {
   outline: 0;
}

Scommetto che la maggior parte degli utenti non è il tipo di utente che utilizza la tastiera come controllo di navigazione. È quindi accettabile infastidire la maggior parte dei tuoi utenti per un piccolo gruppo che preferisce utilizzare la navigazione da tastiera? Risposta breve: dipende da chi sono i tuoi utenti.

Inoltre, non vedo questa esperienza allo stesso modo in Firefox e Safari. Quindi questo argomento sembra essere principalmente per IE. Tutto dipende davvero dalla tua base di utenti e dal loro livello di conoscenza - come usano il sito.

Se vuoi davvero sapere dove ti trovi e sei un utente della tastiera, puoi sempre guardare la barra di stato mentre digiti il ​​sito.

Questo funziona perfettamente per me

a img {border:none;}

Qualsiasi immagine che ha un collegamento avrà un bordo attorno all'immagine per indicare che si tratta di un collegamento con browser meno recenti. L'aggiunta di border = "0" al tuo tag HTML IMG impedirà a quell'immagine di avere un bordo intorno all'immagine.

Tuttavia, l'aggiunta di border = "0" a ogni immagine non solo richiederebbe molto tempo, ma aumenterà anche la dimensione del file e il tempo di download. Se non desideri che nessuna delle tue immagini abbia un bordo, crea una regola CSS o un file CSS contenente il codice seguente.

img {stile bordo: nessuno; }

Non sono sicuro che questo sia ancora un problema per questa persona, ma so che può essere un dolore per molte persone in generale. Certo, le soluzioni di cui sopra funzioneranno in alcuni casi, ma se, ad esempio, stai utilizzando un CMS come WordPress e i contorni vengono generati da un plugin o da un tema, molto probabilmente non lo farai avrai risolto questo problema, a seconda come stai aggiungendo il CSS.

Suggerirei di avere uno StyleSheet separato (ad esempio, utilizzare il plug-in " Lazyest StyleSheet ") e inserire il seguente CSS al suo interno per sovrascrivere lo stile forzato del plug-in (o del tema) esistente:

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

L'aggiunta di " ! Important " alla regola specifica renderà questa una priorità da generare anche se la regola potrebbe essere altrove (sia che si tratti di un plugin, di un tema, ecc.).

Questo aiuta a risparmiare tempo durante lo sviluppo. Certo, puoi cercare la fonte originale, ma quando lavori su molti progetti, o devi eseguire aggiornamenti (dove le tue modifiche possono essere sovrascritte [ non suggerito! ]), O aggiungere nuovi plugin o temi, questo è il migliore ricorso per risparmiare tempo.

Spero che questo aiuti ... Pace!

Se la soluzione sopra non funziona per nessuno. Prova anche questo

a {
 box-shadow: none;
}

Sì, possiamo usare. CSS ripristinato come a {outline:none}e anche

a:focus, a:active {outline:none} per la migliore pratica nel reimpostare CSS, la soluzione migliore è usare comune :focus{outline:none}Se hai ancora l'opzione migliore per favore condividi