13

显然，Internet Explorer（至少到版本 8）在应用过滤器（例如不透明度）时忽略了溢出：可见，导致过滤元素之外的任何内容都被剪裁，就好像使用了溢出：隐藏一样。

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

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

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

2 回答 2

9

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

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
于 2010-09-01T14:57:52.227 回答
2

首先，一个有趣的注意事项：IE9 似乎正确地尊重溢出：可见，即使在模拟 IE8 时也是如此。

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

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

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

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

于 2011-06-08T21:20:19.607 回答