Q:

When I use jQuery to set an element's opacity in IE6 or IE7, it seems to aquire "overflow: hidden". Why?

Consider this HTML:
<!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
        <style type="text/css"> 
        div {
            position: relative;
            width: 200px;
            height: 200px;
            background: #ff0;
        }
        span { 
            position: absolute;
            width: 200px;
            height: 200px;
            background: #f00;
            top: 100px;
            left: 100px;
        }
        </style>
    </head> 
    <body> 
        <div><span></span></div> 
    </body> 
</html> 

Output:

Now let's add some jQuery code that sets the opacity of the containing div to any level:
$('div').css({ opacity: '1' });

The output is now this:

How can I avoid this? Here's a test page.
EDIT: It happens in IE6 as well.

A:

I found that if you empty filter property, the problem goes away.
$('div').css('opacity', '1').css('filter', '');

or
$('div').animate({ opacity: '1' }, function() { 
    $(this).css('filter', '')
});

