70 votos

etiqueta de anclaje posicionado absoluta (con ningún texto) no se puede hacer clic en IE

Tengo dos anclas posiciona de forma absoluta en la parte superior de una imagen, los enlaces se puede hacer clic en otros navegadores (Chrome, FF, Safari), pero no en IE (probado en 8 y 9, hasta ahora)

Lo extraño es que si me dan los enlaces background-color que se puede hacer clic, sin embargo, si el background-color se establece en transparent (que es lo que quiero) ya no son clickeables, también he tratado de ajuste zoom:1 pero no hubo suerte. Supongo que el hasLayout poco en IE se fue con IE 8/9 para adivinar zoom no importa ahora, para este tipo de problema.

Todas las ideas para hacer estos enlaces se muestran en IE 8/9 con un transparente bg?

He aquí, el violín, he estado trabajando con: jsFiddle ejemplo

Tengo el siguiente código HTML diseño de:

<div id="content">
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />

    <div id="countdown"></div>

    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

y el CSS:

body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}

70voto

Michael Giovanni Pumo Puntos 3528

He tenido este problema exacto antes y siempre molesta el infierno fuera de mí. Yo no estoy seguro de por qué ocurre, pero yo siempre crear una 1px 1px PNG transparente (o GIF) y el uso que, en su declaración del fondo así:

a { background: url("/path/to/image.png") 0 0 repeat; }

Espero que esto ayude.

PS - no especificar cualquier color de fondo con esto. Sólo usa el ejemplo anterior y se debe trabajar.

Además de esto, probar y establecer sus etiquetas de anclaje para mostrar como bloque y tal vez también insertar un espacio de no separación en ellos (ya que se vacía en el momento y que podría ser de tropiezo IE):

a { display: block; background: url("/path/to/image.png") 0 0 repeat; }

<a href="#">&nbsp;</a>

53voto

Dio F Puntos 1298

Usted puede hacerlo usando el mencionado background-image truco. Cuando usted no desea utilizar una imagen transparente para esto, sólo tiene que utilizar un desconocido esquema o about:blank en la URL de la imagen.

a { background-image: url("iehack:///"); }

o

a { background-image: url("about:blank"); }

Esto funciona al menos en IE 8 + 9 (la única Erótico que he probado) y en las versiones actuales de Firefox y Chrome. Todavía es válido CSS y no causa ningún tráfico adicional. La primera "hack" puede dar un error de JS en Chrome (y tal vez otros) cuando el uso de jquery. El último solo (pero segura) que le da a un Tipo MIME de advertencia en Chrome debido al mal Tipo MIME de la about:blank documento.

24voto

morewry Puntos 1112

Trasplantado de un comentario que publiqué hace algún tiempo.

Poco más, pero todavía no hay tráfico, base 64 codificados gif transparente:

background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICR‌​AEAOw==')

Esto tiene sus propias ventajas y desventajas, pero puede ser útil. También:

background-color: rgba(0,0,0,0)

He usado este uno más recientemente

10voto

MikeM Puntos 14711

Comentario de @tw16 mencionar invisible me puse a pensar acerca de opacity .

Combinación de IE filter:alpha(opacity=0) con background-color:#fff (o cualquier color) parece ser una buena solución para esto. Probado y funciona en IE 7-9 (6 no es aplicar el filtro de opacidad por alguna razón pero no estoy obligado a soportar 6 para que esto funcione)

La solución de imagen de 1 x 1 en todo el mundo es efecto así que voy a darle el cheque.

Gracias por las respuestas.

3voto

Jim Puntos 31

Tuve el mismo problema. Mi solución fue añadir un borde al anclaje apropiado. Como en el ejemplo siguiente. Una ventaja es, usted no necesita ninguna imagen adicional.

a { border-right: 1px solid transparent }

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X