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.
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', '')
});
精彩评论