Problema con IE cuando se utiliza display: block para enlaces

Question

Ésta es mi HTML:

<div id="links"> 
    <a href="">Link 1</a> 
    <a href="">Link 2</a> 
    <a href="">Link 3</a> 
    <a href="">Link 4</a> 
</div> 

y estos son los estilos CSS:

#links { 
    position: absolute; 
    border: 1px solid #000; 
} 

#links a { 
    display: block; 
} 

#links a:hover { 
    background-color: #CCC; 
} 

Esto muestra una lista de enlaces, el problema es que en IE, solo puedo hacer clic en un enlace haciendo clic directamente en el enlace de texto, que no es el caso con otros navegadores (donde puede hacer clic en cualquier lugar, ya sea en el enlace de texto o en cualquier otro sitio, siempre que esté en el bloque de enlaces). arreglar eso (con solo CSS, sin javascript)?

Tenga en cuenta que no deseo especificar un ancho para los enlaces o div.

Answer 1

Adjunta el texto del enlace en un elemento span. Luego, aceptará clics en cualquier lugar dentro de sus límites.

Answer 2

Poner posición: relativo; en su CSS en #links un {}

like this

Será solucionarlo :)

Answer 3

he tenido el mismo problema y ninguna de las soluciones anteriores funcionó para mí. También necesitaba el fondo de los enlaces para ser transparente.

Una solución muy incómoda, pero una que funcionó perfectamente es establecer el fondo de un gif transparente. Solo necesita ser 1x1 px ya que se repetirá.

#links a 
{ 
    display: block; 
    background: url(/images/interface/blank/1dot.gif); 
} 

Esto parece no tener efectos secundarios aparte de una solicitud adicional al servidor.

Answer 4

No tengo idea de por qué, pero darle al ancla un color de fondo pareció solucionar este problema.

Answer 5

Inserte esto dentro de su estilo -tag a:

background:url('images/dot.png') no-repeat; 

donde dot.png es una imagen transparente de 1x1.

Answer 6

Bien, la solución para este problema es dar a los anclajes una propiedad de fondo que no sea transparente. Algunos propusieron dar a los anclajes una imagen de fondo transparente. Tengo una adición a esto: la imagen no tiene que existir. Simplemente puede escribir cualquier camino y va a hacer que funcione:

a { 
    background:url('dummy/doesnotexist.png') no-repeat; 
} 

Answer 7

Ajuste del color de fondo a #FFF y una opacidad de 0 trabajado para mí en IE9, Chrome y Firefox. No sé sobre otras versiones sin embargo. Establecerlo en transparente no me ayudó.

Esto tiene la ventaja de ser CSS puro y navegador cruzado, por lo que tal vez podría ser una mejor alternativa.