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

Cuando utilizamos el reemplazo de texto usando CSS y damos un guión de prueba negativo, es decir, text-indent:-9999px . Luego, cuando hacemos clic en ese enlace, la línea Punteada aparece como en la imagen de muestra a continuación. ¿Cuál es la solución para esto?

enter image description here

Para Eliminar el esquema 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 usar la propiedad CSS “outline” y el valor de “none” 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 foco están ahí por una razón: si decide eliminarlos, las personas que navegan por el teclado ya no saben qué es lo que está enfocado, por lo que está perjudicando la accesibilidad de su sitio web.

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

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

Este código arreglará solo IE:

 a:active { outline: none; }. 

Y este solucionará tanto Firefox como IE :

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

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

incluye este código en tu 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 esquema 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 código siguiente puede ocultar el borde de la imagen:

  img { border: 0; } 

Si desea admitir Firefox 3.6.8 pero no Firefox 4 … Al hacer clic en una entrada type = image puede producir un contorno punteado también, para eliminarlo en las versiones anteriores de firefox lo siguiente hará el truco:

  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:

   

Este es el último que funciona en Google Chrome

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

-moz-user-focus: ignore; en navegadores basados ​​en Gecko (es posible que sea importante, dependiendo de cómo se aplique)

Use Like This para HTML 4.01

Puede colocar el overflow:hidden en la propiedad con la sangría de texto, y esa línea punteada, que se extiende fuera de la página, desaparecerá.

He visto un par de publicaciones sobre cómo eliminar esquemas todos juntos. Tenga cuidado al hacer esto ya que podría reducir el acceso al sitio.

 a:active { outline: none; } 

Personalmente, utilizaría este atributo únicamente, ya que si el atributo :hover tiene las mismas propiedades CSS, evitará que se muestren los contornos para las personas que usan el teclado para navegar.

Espero que esto resuelva tu problema.

Para quitar 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 utiliza el teclado como control de navegación. ¿Entonces es aceptable molestar a la mayoría de los usuarios de 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. Todo depende de tu base de usuarios y su nivel de conocimiento: cómo usan el sitio.

Si realmente quieres saber dónde estás y eres un usuario de teclado, siempre puedes mirar la barra de estado mientras ingresas 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 es un enlace con navegadores más antiguos. Agregar border = “0” a su etiqueta HTML IMG evitará que esa imagen tenga un borde alrededor de la imagen.

Sin embargo, agregar border = “0” a cada imagen no solo llevaría mucho tiempo sino que también boostá 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 código siguiente.

img {border-style: none; }

Sí, podemos usar Restablecimiento de CSS como a {outline:none} y también


a:focus, a:active {outline:none} para las Mejores Prácticas en Restablecer CSS, La Mejor Solución es common :focus{outline:none} Si aún tiene la Mejor Opción, por favor Compartir