Internet Explorer CSS属性“过滤器”忽略overflow：visible [英] Internet Explorer CSS property "filter" ignores overflow:visible

问题描述

显然，当应用过滤器（例如，不透明度）时，Internet Explorer（最高版本8）会忽略 overflow：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> 
  

解决方案

看来这个解决方法很简单： ：'progid：DXImageTransform.Microsoft.Alpha（opacity = 50）';

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>

解决方案

It seems that the workaround to this is simple: Use -ms-filter rather than filter:

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

这篇关于Internet Explorer CSS属性“过滤器”忽略overflow：visible的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！