IE: Solo se puede hacer clic en la parte de un ancla.

Question

Quiero tener un ancla con una altura y un ancho específicos.

No hay texto en él, ya que está destinado a colocarse en frente de un área determinada de la página.

Aquí está el código:

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"></a> 

Está funcionando muy bien en todo menos en IE6 y IE7. Si agrego un borde, puedo ver que el ancla tiene el tamaño correcto, pero si trato de hacer clic en él, , solo se hará clic en la parte superior.

No sé por qué lo está haciendo. Traté de agregar un onclick incluso con una alerta, y lo mismo, es imposible hacer clic en la parte inferior del ancla.

Es realmente extraño, ¿le ha pasado esto a alguien antes? Cualquier cosa ayudará.

Answer 1

En versiones anteriores de IE, no es posible registrar el evento onclick en los elementos de nivel de bloque. En cambio, IE aplica el onclick al texto o elementos en línea dentro del bloque.

He encontrado que poner transparent image dentro del ancla que es del mismo tamaño que el ancla completa registrará el onclick.

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"> 
    <img src="Transparent.gif" style="width: 370px; height: 80px"/> 
</a> 

Answer 2

podría ser que este es un problema de índice Z con otro div/span/etc.

Answer 3

Dado que este enlace está completamente posicionado, me parece que hay otro bloque que se superpone parcialmente ocultando la mitad del evento de clic.

Answer 4

Cualquier imagen colocada en el fondo del ancla, y luego posicionada fuera de la vista arreglará su problema para IE6 e IE7. No necesita tener una imagen del tamaño completo del ancla según lo sugerido.

Esto significa que puede usar un sprite u otra imagen que ya se está cargando en la página para guardar otra llamada a su servidor.

<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a> 

Answer 5

otra manera de manejar este problema es un poco "truco/solución", cuando el elemento de bloque tiene un fondo todo color está muy bien, ya que te aspecto. hacer uso de algo como esto:

a { 
    .. 
    background-color: white; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    .. 
}