Internet Explorer CSS 属性“过滤器”忽略溢出：可见
显然，Internet Explorer（至少版本 8 以上）在应用过滤器（例如不透明度）时会忽略overflow:visible（例如，不透明度），导致过滤元素之外的任何内容都被剪切，就像<使用了 em>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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
解决这个问题的方法似乎很简单：使用 -ms-filter 而不是 filter：
It seems that the workaround to this is simple: Use -ms-filter rather than filter:
首先，一个有趣的注意事项：IE9 似乎正确地遵循溢出：可见，即使在模拟 IE8 时也是如此。
其次，解决此问题的一个通用解决方法是使您的 #container 和 #child 彼此成为同一父级中的兄弟姐妹。公共父级没有过滤器（意味着溢出将正常工作），并且您可以将所需的过滤器应用于#container。
然而，因为 #child 不再是容器的真正子级，所以它不会收到您的过滤器。这可能是问题，也可能不是问题，一种可能的解决方案是将相同的过滤器也应用于#child。我说这是一个“可能的解决方案”，因为将过滤器独立地应用于两个元素，然后组合它们可能与先组合元素然后将过滤器应用于该组合可能相同或不同。这取决于过滤器是什么，以及元素是否重叠。即使不相同，也可能“足够接近”。
最后，如果您的页面具有将其置于标准模式（而不是 IE 在没有 doctype 时默认的怪异模式）的 doctype，您可能会注意到过滤器不适用于子元素，除非子元素具有position:static (未指定位置时的默认值）。在子级上指定position:absolute或position:relative将导致父级上的过滤器不适用于子级。一般来说，这是一件坏事，但一个副作用是它会导致overflow:visible无法正常工作。
如果您采用此解决方案，您将遇到同样的问题，您可能也需要将过滤器应用于子元素。
First, one interesting note: IE9 seems to correctly honor overflow:visible, even when emulating IE8.
Second, one general workaround to this issue would be to make your #container and #child siblings of one another inside of a common parent. The common parent would have no filter (meaning overflow will function correctly), and you would apply the filter you need to #container.
Because #child is no longer really a child of container, however, it will not receive your filter. This may or may not be a problem, and one possible solution is to apply the same filter to #child as well. I say this is a "possible solution" because applying the filter to the two elements independently, then composing them may or may not be identical to composing the elements first, then applying the filter to that composition. It depends what the filter is, and on whether or not the elements overlap. Even if it is not identical, it might be "close enough."
Finally, if your page has a doctype that puts it into standards mode (instead of the quirks mode to which IE defaults when there is no doctype), you may notice that filters do not apply to child elements unless the child has position:static (the default when no position is specified). Specifying either position:absolute or position:relative on the child will cause the filter on the parent not to apply to the child. Generally, this is a bad thing, but a side effect is that it will cause overflow:visible to work correctly.
If you adopt this solution, you will have the same problem that you may need to apply the filter to the child element as well.