Il rientro del testo negativo causa la selezione di un link grande al clic

Question

Quindi un metodo che uso spesso per creare dei link SEO che usano le immagini è il trucco text-indent: -9999px;. Fondamentalmente, creo un'ancora a livello di blocco con un'immagine di sfondo. Ho impostato il suo numero text-indent su un numero negativo elevato in modo da non vederlo e questo è un bene per il SEO. Quando clicco sul collegamento, però, il contorno di esso spara fuori dalla pagina (vale a dire che va con il testo veramente lontano). Ho trovato questo è successo solo in alcuni casi, maggior parte del tempo:

<div> 
    <a href="#">SEO text</a> 
</div> 

div { 
    width: 100px; 
    height: 100px; 
} 

    div a { 
    display: block; 
    text-indent: -9999px; 
    width: 100px; 
    height: 100px; 
    background: url(stuff) etc...; 
    } 

Il codice qui sopra il 95% del tempo hanno solo il contorno quando si clicca il link solo l'area di 100 x 100px . Tuttavia, quando non si definiscono le dimensioni del genitore, sembra di sparare fuori dalla pagina .... Penso. Ma in questo mio caso, ha dimensioni sul genitore, ma spara ancora dalla pagina. Come risultato, ho fatto il trucco a span { display: none; } ma voglio sapere come posso farlo con il trucco text-indent ma correggere il contorno.

Qualcuno sa come risolvere questo problema? Ho bisogno di un altro genitore o devo impostare un'altra proprietà CSS?

Answer 1

ecco un great article per la rimozione di quel contorno maledetto in Firefox

solo l'aggiunta di un link sentiti molto pigri ecco, aggiungere questo nel vostro CSS:

a 
{ 
    outline: none; 
} 
:focus 
{ 
    -moz-outline-style: none; 
} 

Answer 2

Basta aggiungere overflow: hidden sul tuo div a

Answer 3

Aggiungi overflow:hidden all'etichetta.

div a { 
    overflow: hidden; 
} 

Ciò mantiene il bordo del bordo, ma solo nelle coordinate specificate dell'elemento.

L'applicazione di overflow: hidden sul div o outline: none come Wayne Austin suggests rimuove completamente il contorno che è un problema di usabilità.