Internet Explorer CSS 属性“过滤器”忽略溢出：可见答案

【问题标题】：Internet Explorer CSS property "filter" ignores overflow:visibleInternet Explorer CSS 属性“过滤器”忽略溢出：可见
【发布时间】：2011-04-06 20:54:21
【问题描述】：

显然 Internet Explorer（至少到版本 8）在应用 filter 时会忽略 overflow:visible（例如用于不透明度），从而导致过滤元素之外的任何内容被剪裁好像使用了 overflow:hidden。

这种行为有什么解决方法吗？

下面的示例代码显示了 child 是如何被 container 裁剪的——只有它的右边框和下边框可见。

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

【问题讨论】：

标签： css internet-explorer filter overflow clipping

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

首先，一个有趣的提示：IE9 似乎正确地支持溢出：可见，即使在模拟 IE8 时也是如此。

其次，解决此问题的一个通用解决方法是让您的#container 和#child 兄弟姐妹在一个共同的父节点内。公共父级没有过滤器（意味着溢出将正常工作），您可以将所需的过滤器应用于#container。

因为#child 不再是真正的容器子级，但是它不会接收您的过滤器。这可能是也可能不是问题，一种可能的解决方案是将相同的过滤器也应用于#child。我说这是一个“可能的解决方案”，因为将过滤器独立应用于两个元素，然后组合它们可能与首先组合元素相同或可能不同，然后将过滤器应用于该组合。这取决于过滤器是什么，以及元素是否重叠。即使不相同，也可能“足够接近”。

最后，如果您的页面具有将其置于标准模式的 doctype（而不是 IE 在没有 doctype 时默认使用的 quirks 模式），您可能会注意到过滤器不适用于子元素，除非子元素具有位置:static （未指定位置时的默认值）。在子级上指定 position:absolute 或 position:relative 将导致父级上的过滤器不适用于子级。一般来说，这是一件坏事，但副作用是它会导致溢出：可见正常工作。

如果您采用此解决方案，您将遇到同样的问题，您可能还需要将过滤器应用于子元素。

【讨论】：