Insecto de IE CSS: color de fondo: transparente se comporta de manera diferente al color de fondo: (cualquier otro color)

Question

He estado luchando para descubrir por qué este reinicio no se está comportando como debería en IE8.

Vaya aquí: http://baked-beans.tv en IE8, verá que la reiniciación solo funciona en la mitad inferior de las miniaturas.

Por cierto, esto no está activado por una etiqueta <a> sino por un :hover para el <div>.

Lo que no puedo entender es por qué funciona sólo en la mitad inferior de la div, por debajo de la imagen, pero no en la imagen (la imagen no es indexada-z así que eso no es el problema)

Tan pronto como cambie el background-color a cualquier cosa además de transparente, funciona al 100%. Así que esto me deja boquiabierto ... ¿por qué la mitad inferior, pero no la mitad superior, y solo cuando configuro el color bg como transparente? Tengo que amar Internet Explorer.

Esto funciona como debería en cualquier otro navegador (la totalidad de los actos cuadrados como un rollover)

Aquí está la CSS:

.cat_rollout { 
    position: absolute; 
    float:left; 
    top:0; 
    left:0; 
    min-height:274px; 
    min-width:274px; 
    font-size: 0; 
    background-color: transparent; 
} 

.cat_rollout:hover { 
    background-image: url(images/rollover.png); 
    min-width:254px; 
    min-height:242px; 
    padding-left: 20px; 
    color: white; 
    font-size: 21px; 
    font-weight: normal; 
    line-height: 24px; 
    padding-top: 34px; 
} 

Answer 1

Intente simular una imagen de fondo o configurarla en blanco.gif en su lugar para hacerla transparente.

background:url(blank.gif); 

Ver http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/

Answer 2

También puede intentar cambiar el selector de vuelo estacionario a:

.thumb_container:hover .cat_rollout {...} 

para que el elemento de contención principal sea el elemento que reacciona al elemento emergente.

Answer 3

El problema es que desde hace algún tiempo (una semana? Dos semanas?) IE ha cambiado la forma en que interpreta background-color. Parece que no puedes decir que el color es transparente, sino todo el fondo. Por lo tanto, debe cambiar background-color: transparent en background: transparent. Muy asqueroso.

Answer 4

Puedes usar un gif transparente 1x1 como un datauri si prefieres.

background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==); 

Dependiendo de cuál prefiera, esto funciona y es una alternativa a la respuesta seleccionada.

Answer 5

Se ha observado el mismo problema, donde al pasar el ratón sobre el área en blanco de un elemento transparente no hacen que las reglas de css relacionadas con hover tengan efectos. El problema se soluciona con darle al elemento el siguiente estilo.

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