由於不透明度過濾器，IE8 div溢出不可見（切斷）

我使用jQuery並在div中淡入淡出。適用於所有瀏覽器，但IE8（我懷疑其他IE版本）會切斷div s，當它們的不透明度設置爲filter: alpha(opacity=100)時，會溢出外部div。如果將以下內容複製並粘貼到文件中並使用IE8加載，則會看到藍色方塊被切斷，因爲它溢出了其外部div。由於不透明度過濾器，IE8 div溢出不可見（切斷）

<html> 
<head> 
<style> 
.outer { 
    filter: alpha(opacity=100); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 150px; 
    border: 2px solid #f00; 
    background-color: #700; 
} 
.inner { 
    position: absolute; 
    top: 100px; 
    left: 50px; 
    width: 100px; 
    height: 100px; 
    border: 2px solid #00f; 
    background-color: #007; 
} 
</style> 
</head> 
<body> 
    <div class="outer"> 
     <div class="inner"></div> 
    </div> 
</body>

我怎樣才能得到這個工作，其中內格被允許溢出（是的，我已經試過overflow: visible），我可以使用jQuery的動畫機制不透明？

來源

2011-05-21 at.

我剛剛試過你的代碼與IE8，它確實溢出...它可能是由於你的jQuery代碼，你可以檢查它嗎？ – jackJoe 2011-05-21 10:24:44

我從IE8中加載的.html文件複製並粘貼了該代碼...您有兼容模式嗎？ – 2011-05-21 17:12:14

在你的例子中它是Doctype或缺乏它導致它在IE8中斷，但總體來說這是一個與IE篩選器和hasLayout問題，即使有適當的Doctype仍然發生在IE7中。雖然不確定你想要做什麼動畫，但我想出了一個解決方案的例子在你的OP

關鍵是不要讓outer股利定位，如果你需要它，包裹它另一個div「放置」位置。我發現的另一件事是，IE瀏覽器也可以做的inner DIV不透明度濾光器，但你可能不會在你的實際代碼

這裏的一些解決辦法代碼：

CSS

#wrap{ position: absolute; top: 30px; left:150px} 

.outer { 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
    width: 200px; 
    height: 150px; 
    border: 2px solid #f00; 
    background-color: #700; 
} 

.inner { 
    position: absolute; 
    filter: alpha(opacity=50); 
    top: 100px; 
    left: 50px; 
    width: 100px; 
    height: 100px; 
    border: 2px solid #00f; 
    background-color: #007; 
} 

button {position: absolute; left: 0px; width: 100px;}

HTML

<button>Toggle Fade</button> 
<div id="wrap"> 
    <div class="outer"> 
     <div class="inner"></div> 
    </div> 
</div>

jQuery的

$(document).ready(function() { 

    $('button').click(function(e) { 
     $('.outer, .inner').fadeToggle("slow", "linear"); 
    }); 

});

如果切換未也施加到內格，則該動畫是相當在IE幹，它平滑地變淡的外層div但內的div只是顯示/即刻隱藏

其他瀏覽器不需要在inner上不透明，因爲他們正確地繼承它..所以在那一個它是由你自己，你需要過濾器inner

來源

2011-05-21 12:13:43 clairesuzy

有趣的是，你提到我的問題與IE8是缺乏DOCTYPE聲明。在我的網站上，這是一個真正的問題，我確實有一個DOCTYPE。通過試驗和錯誤，我將問題縮小到了上述代碼。但事實證明你是正確的，添加一個DOCTYPE確實在我的測試html中解決了這個問題。所以我想我需要更多地縮小真正的問題。我真的不關心IE7。 – 2011-05-23 06:44:29

你的解決方案確實對我來說正確地工作。我確實有一些像你提到的不透明平滑問題，但它與外部背景有關。無論如何，至少在動畫之前和之後它看起來不錯。謝謝。 – 2011-05-26 02:47:03

由於不透明度過濾器，IE8 div溢出不可見（切斷）

回答

相關問題