13
Apparently Internet Explorer (up to version 8 at least) ignores overflow:visible when applying filter (e.g. for opacity), causing anything outside the filtered element to be clipped as if overflow:hidden were used.
Are there any workarounds to this behavior ?
The sample code below shows how child is clipped by container – only its right and bottom borders are visible.
<style type="text/css">
#container {
position:absolute;
left:100px;
top:100px;
width:100px;
height:100px;
border:1px solid black;
filter:alpha(opacity=50);
overflow:visible;
}
#child {
position:relative;
left:-10px;
top:-10px;
width:20px;
height:20px;
border:1px solid red;
}
</style>
<div id="container">
<div id="child"></div>
</div>