IE8 div overflow not visible (cut off) due to opacity filter
I use jQuery and fade in divs. Works great on all browsers, but IE8 (I suspect other IE versions as well) will cut off divs that overflow an outer div when their opacity is set with filter: alpha(opacity=100). If you copy and paste the following into a file and load that with IE8, you'll see the blue square gets cut off because it overflows its outer div.
<html>
<head>
<style>
.outer {
filter: alpha(opacity=100);
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 150px;
border: 2px solid #f00;
background-color: #700;
}
.inner {
position: absolute;
top: 100px;
left: 50px;开发者_开发百科
width: 100px;
height: 100px;
border: 2px solid #00f;
background-color: #007;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
How can I get this to work where the inner div is allowed to overflow (yes I've tried overflow: visible) and I can use jQuery's animation mechanism for opacity?
in your example it's the Doctype or lack thereof causing it to break in IE8, but overall it's a problem with IE filters and hasLayout even with a proper Doctype is still happens in IE7. While not sure what exactly you're trying to animate I've come up with a workaround for the example in your OP
The key is not to have the outer div positioned, if you need it to be, wrap it another div which "place-holds" the position. The other thing I found was that IE could also do with an opacity filter on the inner div, but you may not in your real code
here's some workaround code:
CSS
#wrap{ position: absolute; top: 30px; left:150px}
.outer {
filter: alpha(opacity=50);
opacity: 0.5;
width: 200px;
height: 150px;
border: 2px solid #f00;
background-color: #700;
}
.inner {
position: absolute;
filter: alpha(opacity=50);
top: 100px;
left: 50px;
width: 100px;
height: 100px;
border: 2px solid #00f;
background-color: #007;
}
button {position: absolute; left: 0px; width: 100px;}
HTML
<button>Toggle Fade</button>
<div id="wrap">
<div class="outer">
<div class="inner"></div>
</div>
</div>
jQuery
$(document).ready(function() {
$('button').click(function(e) {
$('.outer, .inner').fadeToggle("slow", "linear");
});
});
If the toggle is not also applied to the inner div, then the animation is rather jerky in IE, it smoothly fades the outer div but the inner div just shows/hides instantly
the other browsers don't need opacity on inner as they rightly inherit it.. so on that one it's up to you wether you need that filter on inner
加载中,请稍侯......
精彩评论