Internet Explorer opacity bug

Ma belefutottam abba a hibába amikor opacity tulajdonság segítségével akartam animálni, hogy az Internet Explorer mint mindig most se kezeli jól a dolgokat. A lényeg az, hogy úgy kellett elemeket inaktívnak mutatni, hogy az opacity tulajdonságot leveszem egy kicsit. A valóságban így próbálkoztam elsőre (csak részlet):

1
2
3
4
5

for(i = 0; i < hidden.length; i++) {
	if(hidden[i]) {
		$('.'+hidden[i]).animate({opacity: 0.15});
	}
}

1
2
3
4
5
6
7
8

div{
	float: left;
	display: block;
	width: 160px;
	font-size: 11px;
	font-weight: bold;
	margin-bottom: 10px;
}

Ez mindaddig jó is volt, amíg nem Internet Explorerben néztem meg. Nos a probléma az volt, hogy a div-ben lévő png kép és a betűk is szétestek. A kép átlátszó része fekete lett és a betűk meg elmosódtak és olvashatatlanná váltak. A hibát pedig az alábbi módszerrel tudtam javítani (JavaScript nem változott):

1
2
3
4
5

div{
	opacity: 1;
  	filter: alpha(opacity = 100);
  	background-color: #FFFFFF;
}

Tehát annyit kell csinálni, hogy alapból be kell állítani az opacityt 1-re, valamint kell adni a boxnak egy háttérszínt (pl. ami mögötte van). Az, hogy miért így kezeli az Internet Explorer, azt nem tudom, de mint mindig most is szerencsétlenek voltak a Microsoftnál, és nekünk kell javítgatni.