开发者

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

开发者 https://www.devze.com 2023-02-28 02:33 出处:网络
Consider this HTML: <!DOCTYPE html> <html> <head> <title></title> <style type=\"text/css\">

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:

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

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:

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

How can I avoid this? Here's a test page.

EDIT: It happens in IE6 as well.


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', '')
});
0

精彩评论

暂无评论...
验证码 换一张
取 消