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

Question

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?

Answer 1

probar este CSS:

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

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

NOTA

El anterior no funciona en IE 9. Extracción de una: seleccionado hace que funcione en IE9.

Answer 2

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; } 

Autor Nathan Smith da a more thorough discussion of this, y varios temas relacionados en su blog.

Answer 3

manera típica y seguro para hacerlo es la siguiente:

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

Desde expresssion() ha sido destripado en IE8, es posible que tenga una secuencia de comandos:

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

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

Answer 4

El a { outline: none; } rompe la usabilidad del teclado. Y el selector a:active {} parece romperlo igual de bien la última vez que lo revisé en Firefox.

Hay una manera JS de deshacerse del borde sin romper nada, así como el código JS para deshacerse del borde en IE6 e IE7.

Describí el método en my tutorial.

Answer 5

Pruebe con este CSS:

Para Mozilla:

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

|:focus { outline: none; } 

button, input[type="reset"], input[type="button"], input[type="submit"] { outline: none; } 

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px 2px 0px 2px; border: 1px dotted transparent; } 

---

Para IE8:

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

Answer 6

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

Answer 7

a img {border: none; } 

eso es todo, no hay necesidad de complicar esto.

Answer 8

También puede usar outline: 0 en object e embed.algunos poniendo a cero CSS básico sería el siguiente:

a, a:visited { 
    text-decoration:none; 
    color: #e3a512; 
    } 
a:hover, a:active, a:focus { 
    text-decoration:none; 
    color: #fff; 
    outline:0; 
    } 
object, embed, a, a img, a:active, a:selected, a:visited { 
    outline:0 
    } 

Answer 9

solución en JavaScript para eliminar el borde activo en los enlaces en todos los navegadores: añadir el evento onfocus = "this.blur();" en su enlace

<a href="#" onfocus="this.blur()"> Link </a> 

NOTA: esto funcionará en todos los navegadores.

Answer 10

a:focus, *:focus { 
    noFocusLine: expression(this.onFocus=this.blur()); 
} 

Tomado de aquí: http://www.cssjunction.com/css/remove-dotted-border-in-ie7/

Answer 11

Esta funciona mejor para mí

a{ 
    outline: 0; 
} 

Answer 12

que quería conseguir este funcionamiento para Button y esto funcionó para mí

button { 

    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none;  
    background-color: transparent; 
    noFocusLine: expression(this.onFocus=this.blur()); 
}