Problema con la opacidad en IE8

Intento resolver un problema que aparece en IE8. Html es muy simple:

Cuando configuro (usando jQuery) la opacidad del elemento “#source” con “0” en IE, puedo ver el fondo de #overlay, no #imgcontainer> div, pero ¿por qué? Hay un código de JavaScript:

 $(function(){ $("#source").css({ opacity: "0", }); $("#overlay").css({ width: $(window).width(), height: $(window).height(), display: "block", opacity: "0.6" }); $("#imgcontainer").css({ zIndex: 2, position: "fixed", opacity: "1", left: "0", right: "0", top: "100px", display: "block" }); }); 

Puedes probar el ejemplo en vivo en jsFiddle .
UPD:
Después de algunos experimentos, encontré la solución. Es realmente un problema html \ css, así que hice una refacturación del código y eliminé la etiqueta jQuery. Imagina que tenemos ese tipo de html:

  

y los estilos CSS:

 body { background-color: #c8c8c8; } #d1 { background-color: #6c0922; width: 500px; border: 1px solid black; filter: alpha(opacity = 100); } #d2 { background-color: #146122; width: 350px; margin: 20px auto; border: 1px solid black; } #d3 { background-color: #0080c0; height: 100px; margin: 10px 65px; filter: alpha(opacity = 0); zoom: 1; } 

A primera vista todo está bien, esperamos que #d3 vuelva transparente y podamos ver #d2 fondo #d2 (verde oscuro). Pero no tan simple en IE7 \ 8. En IE podemos ver el fondo del cuerpo (gris) a través de #d2 y #d1 . Toda la magia en #d1 lo adivinaste. Cuando eliminamos el filter: alpha(opacity = 100); todo funciona correctamente

Puede preguntar, pero ¿por qué establece opacidad = 1 en el elemento que ahora no es transparente? No lo sé :). Puede ser por alguna razón que deberías usar este comportamiento. Comportamiento muy interesante e inesperado.

Puedes jugar con este ejemplo en jsFiddle .

Tuve el mismo problema. Hice muchas búsquedas y lecturas y encontré que IE8 no usa el CSS para la opacidad que usan otros navegadores. Aquí está mi CSS que utilicé para IE8:

 #loading-div-background { display:none; position:absolute; top:0; left:0; background:gray; width:100%; height:100%; /* Next 2 lines IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); } 

Sin embargo, todavía no funcionaba con la posición: fijo, pero una vez que puse en posición: absoluto comenzó a funcionar.

IE8 no es compatible con la opacity atributo CSS; en su lugar, debe usar un filtro MS:

  opacity: "0", filter: alpha(opacity = 50); /*change value to suit your needs*/ 

Eso no es todo. Esto solo funciona cuando el elemento está posicionado, afortunadamente ya lo tienes para que funcione. Para referencia futura, si no tiene ningún conjunto de posiciones, puede agregar zoom: 1 al selector y funcionará en IE 🙂