2011-05-20 37 views
35

Tengo algo de HTML donde tengo etiquetas img dentro de una etiqueta href para usar como un botón. Todo funciona bien, excepto que cuando lo abro en IE, obtengo un borde alrededor de la etiqueta img.poner una etiqueta img dentro de una etiqueta a href provoca un borde alrededor de la imagen en IE

Aquí hay algo de código:

<a href="javascript:changecolor(1)" title="Click Again to Change Color" style="cursor:pointer; text-decoration:none"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a> 
<a href="javascript:changecolor(2)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a> 
<a href="javascript:changecolor(3)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a> 
<a href="javascript:changecolor(4)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a> 
<a href="javascript:changecolor(7)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a> 
<a href="javascript:changecolor(6)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px; text-decoration:none" /></a> 

¿Cómo puedo deshacerme de la frontera azul, que sólo aparece en el IE?

Respuesta

48

solución simple, en su hoja de estilo crear un estilo similar a esto:

a img{ 
border:0; 
} 

En su caso, se podría actualizar su estilo para incluir algunos de los estilos en línea que tiene en su HTML. Por ejemplo, la hoja de estilos se actualizó:

a{ 
cursor:pointer; 
text-decoration:none 
} 

a img{ 
margin-top:600px; 
} 
+0

que funcionó muy bien, sin embargo, tengo otro problema menor otra vez solo en IE, tengo un margen superior en algunas de mis imágenes y cuando hago clic allí es una caja con rayas en gris alrededor del tamaño del margen cuando hago clic en él, ¿alguna idea de cómo eliminarlo? – user541597

+0

Parece que podría ser el cambio de color JS su implementación. Intente quitar el margen superior del img y aplicarlo a la etiqueta a. Si eso no funciona, ¿puedes proporcionar un enlace en vivo o una captura de pantalla? – Dan

+0

Es posible que tenga que agregar el estilo 'display: inline-block' a la clase 'a' para que reconozca el margen también. – Dan

12

Añadir border = "0" atributo a la etiqueta img

+5

solo esta solución funciona para mí –

5

En cuanto a la cuestión de menor importancia con Internet Explorer y el cuadro sombreado que alrededor de la etiqueta de anclaje - esto es contorno. Para ocultar el cuadro de contorno puede usar el siguiente CSS:

a img{outline:none;} 
Cuestiones relacionadas