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

css internet-explorer

Question

Necesito hacer que se pueda hacer clic en un área dentro de una imagen de fondo para generar un evento para el uso de JavaScript. Entonces, creé una etiqueta de anclaje y dentro de ella inserté un texto relevante entre etiquetas semánticamente sin sentido que luego hice ocultas:

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

Luego le di a la etiqueta de anclaje ''mostrar: bloque'' propiedades, valores de ancho y alto, y la coloqué absolutamente donde la necesitaba en relación con la imagen de fondo. En Firefox, esto funciona bien. Me desplazo y mi cursor cambia como se esperaba. Tengo algo que se puede hacer clic. Sin embargo, a IE7 no le gusta el hecho de que la etiqueta de anclaje esté ''vacía'' y, por lo tanto, no la trate como un clic. Así que agregué esto a la etiqueta de anclaje en css:

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

... lo que parece engañar a IE7 para que asuma que algo está ahí. IE7 ahora trata el área como cliqueable, incluso si no existe una imagen de fondo para la etiqueta de anclaje. Pero esto me parece un poco difícil y me pregunto si hay una manera más elegante de lidiar con este problema. Cualquier idea sería apreciada grandemente Gracias.

Answer 1

Deshágase de las etiquetas semánticamente sin sentido y, en su lugar, utilice el reemplazo de imagen CSS normal.

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

Y luego el CSS:

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

Agregue cualquier posición que necesite, y debería funcionar bien.

Answer 2

Ha encontrado un problema de representación con IE, y según @Simon a continuación, el problema todavía existe al menos a través de IE9.

Su background: hack funcionará, pero el navegador realizará una solicitud HTTP cada vez que resuelva la URL falsa. Esto puede perjudicar el rendimiento de su página. Para lograr el mismo resultado pero no realizar una solicitud HTTP innecesaria, sugeriría usar esta URL en su lugar:

background-image:url(about:blank);

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

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

Answer 3

Haga un DIV pulsable en su lugar. Si está llamando a JavaScript, no necesita una etiqueta de anclaje en absoluto.

Absolutamente puede posicionar si es necesario.

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

Answer 4

He tenido un problema en IE9 y más abajo últimamente donde no funcionó el área alrededor de la etiqueta de anclaje. Ninguna de las resoluciones típicas funcionó para mí. Lo que encontré funcionó fue agregar este estilo al elemento html:

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

El orden del índice z es diferente en IE que en otros navegadores.