This is an ancient problem: older versions of IE do not support the opacity CSS property. Instead, IE8 uses -ms-filter and IE prior 8 uses filter. Also, in IE, one has to be cautious about the positioning of the element the opacity properties apply to: the element has to be positioned for the filter to work properly. Another trick is to use zoom.
Let’s wrap this up in the css snippet below:
#page {
opacity: 0.5;
}
/* IE7 and less */
#page {
filter: alpha(opacity=50);
position: relative;
zoom: 1;
}
/* IE8 specific */
#page {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
position: relative;
zoom: 1;
}
It is a pain but it works.
But what I found is that if you try to set these properties dynamically, through jQuery for instance, they are less obedient.
For filter and -ms-filter to be set through jQuery, the element has to be positioned through css and NOT by jQuery.
So one would need something like this:
/* IE less than 9 */
#page {
position: relative;
zoom: 1;
}
if($.support.opacity){
$('#page').css('opacity' , ".5")
}else {
$('#page').css('filter' , 'alpha(opacity=50)');
$('#page').css('-ms-filter' , 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)');
}
This is empirical knowledge though. I don’t know why is it like this.
Like this:
Like Loading...