Internet Explorer的CSS屬性的「過濾器」忽略溢出：可見

顯然的Internet Explorer（最多8個版本至少）忽略溢出：應用過濾（如不透明度）的情況下，過濾元件的外部造成任何可見如果溢出：隱藏被使用。Internet Explorer的CSS屬性的「過濾器」忽略溢出：可見

是否有任何解決此問題的方法？

的示例下面的代碼演示瞭如何孩子由容器裁剪 –只有它的右側和底部邊框是可見的。

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

來源

2010-09-01 Archimedix

所以你的問題是...？ – 2010-09-01 14:57:36

看來，解決方法很簡單：使用-MS-過濾而非過濾：

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

來源

2010-09-01 14:57:52 Archimedix

請注意，ms篩選器僅適用於IE8 +。 – 2011-03-02 20:40:14

這隻適用於IE8。 IE9不再有效。 – iamwonder 2014-11-25 22:17:39

首先，值得注意的一點是：IE9似乎正常履行溢出：即使在模擬IE8時也是如此。

其次，這個問題的一個通用解決方法是讓你的#container和#child兄弟姐妹在一個共同的父母之內。共同的父母將沒有過濾器（意味着溢出將正常工作），並且您將應用您需要的過濾器#container。

由於#child不再是容器的子項，但是它不會收到過濾器。這可能是也可能不是問題，並且一種可能的解決方案是將相同的過濾器應用於#child。我說這是一個「可能的解決方案」，因爲獨立地將濾鏡應用於兩個元素，然後對它們進行構圖可能與首先構成元素相同或不相同，然後將濾鏡應用於該構圖。這取決於過濾器是什麼，以及這些元素是否重疊。即使它不相同，它也可能「足夠接近」。最後，如果你的頁面有一個doctype把它放到標準模式（而不是默認的怪癖模式，當沒有文檔類型時默認的），你可能注意到過濾器不適用於子元素，除非孩子有位置：靜態（沒有指定位置時的默認值）。指定任一位置：絕對或位置：相對於子項將導致父項上的篩選器不適用於子項。一般來說，這是一件壞事，但副作用是它會導致溢出：可見正常工作。

如果採用此解決方案，您將遇到同樣的問題，您可能還需要將篩選器應用於子元素。

來源

2011-06-08 21:20:19 mikepr

Internet Explorer的CSS屬性的「過濾器」忽略溢出：可見

回答

相關問題