Opacity property in IE

Question

Curvy Corners is a JavaScript library that allows IE to understand the border radius CSS property. Is there a similar JavaScript library that does this for the opacity property? ie9.js can do this, but it does not reapply itself after updating the DOM asynchronously.

Answer 1

You can use something like jQuery to create a simple patch yourself:

$('.your-elem').each(function(){
    $(this).css({opacity: 0.5});  // sets all elements with class .your-elem to 50% opacity
});

If the opacity fix you're going for needs to be applied to PNGs, then I've found the Unit PNG Fix to work very well. It says only for IE6 but I've used it through 6, 7 and 8 with no problems.

The above fix also allows you to smoothly animate the opacity of PNGs if that PNG is contained within the element you're adjusting opacity on (without this, you get a nasty black border during the change):

Markup

<div id="opacity-change">
    <img src="some.png" />
</div>

jQuery

$("#opacity-change").css({opacity: 0});
$("#opacity-change").fadeIn();

Answer 2

There are some IE opacity solutions here: http://www.impressivewebs.com/css-opacity-reference/. Basically:

#myElement {
  filter: alpha(opacity=40);
}

There are also javascript solutions mentioned, including what Pat suggested. Much more detail found at the link above.