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

Question

Quando si utilizza la sostituzione del testo con CSS e si ottiene un rientro di prova negativo, ad esempio text-indent:-9999px. Quindi, quando clicchiamo su quel collegamento, la linea tratteggiata appare come nell'immagine di esempio qui sotto. Qual è la soluzione per questo?

Answer 1

per Remove schema per tag di ancoraggio

a {outline : none;} 

Rimuovere contorno di immagine link

a img {outline : none;} 

Rimuovere confine dalla immagine link

img {border : 0;} 

Answer 2

È possibile utilizzare la proprietà CSS "contorno" e il valore di "none" sull'elemento di ancoraggio.

a { 
outline: none; 
} 

Spero che questo aiuti.

Answer 3

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

Answer 4

Sì possiamo usare. Reset CSS come a {outline:none} ed anche

---

a:focus, a:active {outline:none} per la migliore pratica in Ripristino CSS, la soluzione migliore sta usando comune :focus{outline:none} Se avete ancora migliore opzione si prega di condividere

Answer 5

C'è lo stesso effetto frontiera in Firefox e Internet Explorer (IE), diventa visibile quando si fa clic su un collegamento.

Questo codice risolverà solo IE:

a:active { outline: none; }. 

E questo sarà correggere sia Firefox e IE:

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

Ultima codice dovrebbe essere aggiunto nella vostra foglio di stile, se si desidera rimuovere i bordi del collegamento dal tuo sito.

Answer 6

Si noti che gli stili di messa a fuoco sono lì 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.

(Tenerli in luogo aiuta anche gli utenti di alimentazione che non amano usare il loro mouse)

Answer 7

Si può mettere overflow:hidden sulla proprietà con il rientro del testo, e che la linea tratteggiata, che si estende fuori della pagina , scomparirà.

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

a:active { outline: none; } 

io personalmente vorrei usare questo attributo solo, come se l'attributo :hover ha le stesse proprietà CSS che impedirà i contorni che mostrano per le persone che utilizzano la tastiera per la navigazione.

Spero che questo risolva il tuo problema.

Answer 8

Per Internet Explorer 9:

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

Answer 9

Sono pronto a scommettere la maggior parte degli utenti non sono il tipo di utente che utilizzano la tastiera come un controllo di spostamento. È 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 molto dalla tua base di utenti e dal loro livello di conoscenza   - come usano il sito.

Se vuoi veramente sapere dove sei e sei un utente di tastiera, puoi sempre guardare la barra di stato mentre passi attraverso il sito.

Answer 10

Questo funziona perfettamente per me

a img {border:none;}

Answer 11

includere questo codice nel tuo foglio di stile

img {border : 0;} 

a img {outline : none;} 

Answer 12

Usa come questo per HTML 4,01

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

Answer 13

Qualsiasi immagine che ha un link avere un bordo intorno all'immagine per aiutare a indicare che si tratta di un collegamento con i browser più vecchi. L'aggiunta di border = "0" al tuo tag HTML IMG impedirà che l'immagine abbia un bordo intorno all'immagine.

Tuttavia, aggiungendo border = "0" per ogni immagine sarebbe non solo in termini di tempo aumenterà anche la dimensione del file e il tempo di download. Se non vuoi che nessuna delle tue immagini abbia un bordo, crea una regola CSS o un file CSS con il codice sottostante.

img {border-style: none; }

Answer 14

Spero che questo sia utile per alcuni di voi, può essere usato per rimuovere contorno dai collegamenti, immagini 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 qui sotto è in grado di nascondere bordo dell'immagine:

img { 
    border: 0; 
    } 

Se si desidera supportare Firefox 3.6.8 ma non Firefox 4 ...Cliccando giù su un input type = immagine può produrre un bordo punteggiato pure, per rimuoverlo nelle vecchie versioni di Firefox la seguente farà il trucco:

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

IE 9 non consente in alcuni casi da rimuovere la linea tratteggiata intorno collegamenti a meno che non include questo meta tag tra e nelle vostre pagine:

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

Answer 15

questo è l'ultimo quello che funziona su Google Chrome

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

Answer 16

al fine di Removi ng Il link a struttura punteggiata href puoi scrivere nel tuo file css:

a { 
    outline: 0; 
}