Cómo eliminar el borde punteado de los hipervínculos activos en IE8 con CSS

Los textos de hipervínculo activos se resaltan con un borde punteado. Al usar efectos en tales hipervínculos (fadeIn / fadeOut) produce efectos extraños. ¿Cómo desactivo / elimino el borde punteado?

Prueba este CSS:

a:active, a:selected, a:visited { border: none; outline: none; } 

Tenga en cuenta que esto tiene que ser después de cualquier regla a a:hover . Gracias a PEra en los comentarios por sugerir el uso del selector a a:selected también.

NOTA

Lo anterior no funciona en IE 9. La eliminación de: seleccionado hace que funcione en IE9.

Una forma típica y segura de hacerlo es esta:

 a:active, a:focus { outline: none; /* non-IE */ ie-dummy: expression(this.hideFocus=true); /* IE6-7 */ } 

Dado que expresssion() ha sido destruido en IE8, es posible que necesite un script:

 if (document.documentElement.attachEvent) document.documentElement.attachEvent('onmousedown',function(){ event.srcElement.hideFocus=true }); 

Si va a eliminar el esquema de enfoque predeterminado, debe definir su propio estilo distintivo para :focus , de lo contrario los usuarios de teclado tendrán dificultades para usar su sitio.

Ten cuidado. El borde de puntos es una parte valiosa de la navegación por el teclado. Resalta en qué enlace se hará clic.

 a:active { outline: none; } 

El autor Nathan Smith brinda una discusión más completa sobre esto y varios temas relacionados en su blog.

 a:active, a:focus { outline:none; }