Eliminare i bordini dei link attivi di Firefox

Link e bordi Finendo un lavoro con un cliente mi è stato segnalato che su Firefox comparivano alcuni strani bordini sui link. Questi diventavano particolarmente anti-estetici nella barra del menù (cliccate sull’immagine per vedere meglio l’esempio) dove è stata usata la tecnica text-indent per il riposizionamento delle immagini.

Cercando come risolvere il problema ho scoperto che dipende tutto dalle impostazione di usabilità del panda rosso. La soluzione è quindi molto semplice (anche se fa perdere la validità del CSS).

Dovete aggiungere all’interno del vostro foglio di stile il seguente codice

:-moz-any-link:focus { outline: none; }

questo forza il browser a sovrascrivere le impostazioni di default contenute in path/to/firefox/res/ua.css che prevedono appunto la comparsa del bordo dotted di un pixel quando si clicca col mouse.

via sonspring

ciuaz

  • ma un link:active con border none non farebbe lo stesso? (o forse non ho capito niente :-)

  • Se vuoi mantenere la validità del CSS ti consiglio di scrivere la regola dentro un document.write di Javascript, contenuto nella head. Dovrebbe funzionare.

  • io in genere in progetti che non necessitano di particolari accorgimenti di usabilità utilizzo semplicemente
    a:focus { outline: 0; }

  • simone

    ok funziona perfettamente con firefox, ma come si può ottenere lo stesso risultato con internet explorer?

%d bloggers like this: