Internet Explorer CSS 属性“过滤器”忽略溢出:可见
Posted
技术标签:
【中文标题】Internet Explorer CSS 属性“过滤器”忽略溢出:可见【英文标题】:Internet Explorer CSS property "filter" ignores overflow:visible 【发布时间】: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>
【问题讨论】:
【参考方案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 将导致父级上的过滤器不适用于子级。一般来说,这是一件坏事,但副作用是它会导致溢出:可见正常工作。
如果您采用此解决方案,您将遇到同样的问题,您可能还需要将过滤器应用于子元素。
【讨论】:
以上是关于Internet Explorer CSS 属性“过滤器”忽略溢出:可见的主要内容,如果未能解决你的问题,请参考以下文章
使用 jQuery.css 在 Internet Explorer 中获取价值
CSS 和 Internet Explorer 7 的神秘问题
jQuery 属性选择器在 Internet Explorer 中不起作用
对于某些情况,如 Internet Explorer 特定的 CSS 或 Internet Explorer 特定的 JavaScript 代码,如何仅针对 Internet Explorer 10?