Internet Explorer CSS属性"filter"忽略overflow:visible

Question

显然Internet Explorer(至少版本8)忽略溢出:应用过滤器时可见(例如,对于不透明度),导致过滤元素之外的任何内容被剪裁,就像使用overflow:hidden一样.

这种行为有什么变通方法吗？

下面的示例代码显示了如何通过容器剪切子项 - 只有其右侧和底部边框可见.

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

Answer 1

似乎解决方法很简单:使用-ms-filter而不是filter:

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';