¿Cómo puedo eliminar el contorno de las imágenes de hipervínculos?

Cuando usamos Reemplazo de texto usando CSS y damos una sangría de prueba negativa, es decir text-indent:-9999px. Luego, cuando hacemos clic en ese enlace, la línea de puntos aparece como en la imagen de muestra a continuación. ¿Cuál es la solución para esto?

Para eliminar el contorno de la etiqueta de anclaje

a {outline : none;}

Eliminar el contorno del enlace de la imagen

a img {outline : none;}

Eliminar el borde del enlace de la imagen

img {border : 0;}

Puede utilizar la propiedad CSS "esquema" y el valor "ninguno" en el elemento de anclaje.

a {
outline: none;
}

Espero que ayude.

Para Internet Explorer 9:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

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

Tenga en cuenta que los estilos de enfoque están ahí por una razón: si decide eliminarlos, las personas que navegan a través del teclado ya no saben qué está enfocado, por lo que está perjudicando la accesibilidad de su sitio web.

(Mantenerlos en su lugar también ayuda a los usuarios avanzados a los que no les gusta usar el mouse)

Existe el mismo efecto de borde en Firefox e Internet Explorer (IE) , se vuelve visible cuando haces clic en algún enlace.

Este código arreglará solo IE:

a:active { outline: none; }.

Y este arreglará tanto Firefox como IE :

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

El último código debe agregarse a su hoja de estilo, si desea eliminar los bordes del enlace de su sitio.

incluya este código en su hoja de estilo

img {border : 0;}

a img {outline : none;}

Espero que esto sea útil para algunos de ustedes, se puede usar para eliminar el contorno de enlaces, imágenes y flash y de 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 */
    }

El siguiente código puede ocultar el borde de la imagen:

    img {
    border: 0;
    }

Si desea admitir Firefox 3.6.8 pero no Firefox 4 ... Al hacer clic hacia abajo en un tipo de entrada = imagen, también puede producir un contorno de puntos, para eliminarlo en las versiones anteriores de Firefox, lo siguiente funcionará:

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

IE 9 no permite en algunos casos eliminar el contorno punteado alrededor de los enlaces a menos que incluya esta metaetiqueta entre y en sus páginas:

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

Este es el último que funciona en Google Chrome.

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

-moz-user-focus: ignore; en navegadores basados ​​en Gecko (¡puede necesitar! importante, dependiendo de cómo se aplique)

Usar así para HTML 4.01

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

Puede poner overflow:hiddenen la propiedad con la sangría de texto, y esa línea de puntos, que se extiende fuera de la página, desaparecerá.

He visto un par de publicaciones sobre cómo eliminar todos los contornos. Tenga cuidado al hacer esto, ya que podría reducir la accesibilidad del sitio.

a:active { outline: none; }

Personalmente, usaría solo este atributo, ya que si el :hoveratributo tiene las mismas propiedades css, evitará que los esquemas se muestren para las personas que usan el teclado para navegar.

Espero que esto resuelva tu problema.

Para eliminar el enlace href del esquema punteado, puede escribir en su archivo css:

a {
   outline: 0;
}

Apuesto a que la mayoría de los usuarios no son el tipo de usuario que usa el teclado como control de navegación. ¿Es entonces aceptable molestar a la mayoría de sus usuarios por un grupo pequeño que prefiere usar la navegación por teclado? Respuesta corta: depende de quiénes sean sus usuarios.

Además, no veo esta experiencia de la misma manera en Firefox y Safari. Entonces, este argumento parece ser principalmente para IE. En realidad, todo depende de su base de usuarios y de su nivel de conocimientos: cómo utilizan el sitio.

Si realmente desea saber dónde se encuentra y es un usuario de teclado, siempre puede mirar la barra de estado a medida que ingresa al sitio.

Esto funciona perfectamente para mi

a img {border:none;}

Cualquier imagen que tenga un enlace tendrá un borde alrededor de la imagen para ayudar a indicar que se trata de un enlace con navegadores más antiguos. Agregar border = "0" a su etiqueta IMG HTML evitará que esa imagen tenga un borde alrededor de la imagen.

Sin embargo, agregar border = "0" a cada imagen no solo tomaría mucho tiempo sino que también aumentará el tamaño del archivo y el tiempo de descarga. Si no desea que ninguna de sus imágenes tenga un borde, cree una regla CSS o un archivo CSS que contenga el siguiente código.

img {estilo de borde: ninguno; }

No estoy seguro de si esto sigue siendo un problema para esta persona, pero sé que puede ser un dolor para muchas personas en general. Por supuesto, las soluciones anteriores funcionarán en algunos casos, pero si, por ejemplo, está utilizando un CMS como WordPress, y los esquemas los genera un complemento o un tema, lo más probable es que no que resuelva este problema, dependiendo de cómo está agregando el CSS.

Sugeriría tener una hoja de estilo separada (por ejemplo, use el complemento ' Lazyest StyleSheet ') e ingrese el siguiente CSS para anular el estilo forzado del complemento (o tema) existente:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

Agregar ' ! Important ' a la regla específica hará que esto sea una prioridad para generar incluso si la regla puede estar en otro lugar (ya sea en un complemento, tema, etc.).

Esto ayuda a ahorrar tiempo durante el desarrollo. Claro, puede buscar la fuente original, pero cuando está trabajando en muchos proyectos o necesita realizar actualizaciones (donde sus cambios pueden ser anulados [ no sugeridos! ]), O agregar nuevos complementos o temas, este es el mejor. recurso para ahorrar tiempo.

Espero que esto ayude ... ¡Paz!

Si la solución anterior no funciona para nadie. Pruébalo también

a {
 box-shadow: none;
}

Sí, podemos usar. CSS se restablece como a {outline:none}y también

a:focus, a:active {outline:none} para obtener las mejores prácticas en el restablecimiento de CSS, la mejor solución es usar común. :focus{outline:none}Si aún tiene la mejor opción, comparta