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>
Edit
Report