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?

卡片翻转动画 Internet Explorer 11

css 仅限Internet Explorer(IE)CSS。支持版本10+