代码之家 › 专栏 › 技术社区 › Arc

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

clipping overflow filter internet-explorer css

Arc · 技术社区 · 16 年前

显然Internet Explorer(至少版本8)忽略了 溢出:可见 应用时 滤波器 溢出:隐藏 被利用了。

下面的示例代码显示了容器

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

2 回复 | 直到 16 年前

Arc 16 年前

似乎解决方法很简单:使用 -ms过滤器 而不是 滤波器 :

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

mikepr 15 年前

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

最后,如果您的页面有一个doctype使其进入标准模式(而不是没有doctype时IE默认的quirks模式),您可能会注意到过滤器不适用于子元素,除非子元素有位置:静态(未指定位置时的默认值)。指定位置:绝对或位置:相对打开子级将导致父级上的筛选器不应用于子级。一般来说,这是一件坏事,但副作用是它会导致溢出:对可见正确工作。

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

推荐文章