¿Cómo hacer que una etiqueta de ancla vacía se pueda hacer clic en IE7?

Question

Necesito hacer que un área dentro de una imagen de fondo pueda hacer clic para generar un evento para el uso de JavaScript. Por lo tanto, he creado una etiqueta de anclaje y en el interior que me inserta un texto relevante entre las etiquetas semánticamente sin sentido que luego hizo ocultos:

<a href="#"><i>foo</i></a> 

Entonces me dio la etiqueta de anclaje 'display: block' propiedades, los valores de anchura y altura, y lo coloqué absolutamente donde lo necesitaba en relación con la imagen de fondo. En Firefox esto funciona muy bien, me cierro el cursor y mi cursor cambia como se esperaba, tengo algo que hacer clic. IE7 sin embargo, no le gusta el hecho de que la etiqueta de anclaje está "vacía" y, por lo tanto, no la trata como clicable. Por lo que añade esto a la etiqueta de anclaje en css:

background:url(/no-image.jpg); 

... que parece engañar a Internet Explorer 7 en el supuesto de que algo está alrededor. IE7 ahora trata el área como clicable, incluso si no existe realmente una imagen de fondo para la etiqueta de anclaje. Pero esto me parece un poco complicado y me pregunto si hay una forma más elegante de lidiar con este problema. Cualquier idea sería muy apreciada. Gracias.

Answer 1

Deshágase de las etiquetas semánticamente sin sentido y use la sustitución normal de imágenes CSS, en su lugar.

<a href="#">foo</a> 

Y entonces el CSS:

a { 
    width:100px; 
    height:100px; 
    display:block; 
    text-indent:-9999px; 
    background:url(/img.png) no-repeat; 
} 

Añada cualquier posicionamiento que necesita, y que debería funcionar bien.

Answer 2

Haga clic en un DIV que se pueda hacer clic. Si llama a JavaScript, no necesita una etiqueta de anclaje en absoluto.

Puede colocarlo absolutamente si es necesario.

<div onclick="alert('moo')" style="height;100px;width:100px;cursor:pointer"></div> 

Answer 3

Usted ha encontrado un problema de representación con el IE, y de acuerdo con @Simon por debajo de la cuestión todavía existe, al menos, a través de IE9.

Su truco background: funcionará, pero el navegador hará una solicitud HTTP cada vez para resolver la URL falsa. Esto puede perjudicar el rendimiento de su página. Para lograr el mismo resultado, pero no hacer una petición HTTP innecesaria, me gustaría sugerir el uso de esta URL en su lugar:

background-image:url(about:blank); 

about:blank es una URL especial que los navegadores muestran como una página en blanco, por lo que no afectará a la forma en la se muestra el elemento, pero tampoco hará ninguna solicitud HTTP.

Por cierto, el problema solo ocurre cuando tienes un elemento A con absoluta o relativamente posición (o un elemento A dentro de un bloque posicionado). Los hipervínculos regulares no posicionados no parecen tener este problema bajo IE7.

Answer 4

Tuve un problema últimamente en IE9 y en el que no funcionaba el área en la que se podía hacer clic alrededor de la etiqueta de anclaje. Ninguna de las resoluciones típicas funcionó para mí. Lo que encontré fue trabajado adición de este estilo para el elemento html:

html { 
position:relative; 
z-index:-1001; 
} 

El índice z pedido es diferente en IE que en los otros navegadores.