Opacity in Internet Explorer

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.

Advertisements