IE8中不透明的問題

我嘗試解決IE8中出現的問題。 HTML是非常簡單的：IE8中不透明的問題

<div id="overlay"> 
</div> 
<div id="imgcontainer"> 
    <div> 
     <div id="source"> 
     </div> 
     </div> 
</div>

當我設置爲「#source」元素（使用jQuery）不透明度爲「0」在IE中，我可以看到#overlay的背景下，不#imgcontainer> DIV，但是爲什麼呢？有一個javascript代碼：

$(function(){ 
    $("#source").css({ 
     opacity: "0", 
    }); 
    $("#overlay").css({ 
     width: $(window).width(), 
     height: $(window).height(), 
     display: "block", 
     opacity: "0.6" 
    }); 

    $("#imgcontainer").css({ 
     zIndex: 2, 
     position: "fixed", 
     opacity: "1", 
     left: "0", 
     right: "0", 
     top: "100px", 
     display: "block" 
    }); 
});

您可以嘗試在jsFiddle活生生的例子。
UPD：
經過一番實驗後，我找到了解決方案。這真的是html \ css問題，所以我對代碼進行了一些重構並刪除了jQuery標記。試想一下，我們有這樣的HTML黑暗了：

<body> 
     <div id="d1"> 
      <div id="d2"> 
       <div id="d3"> 
       </div> 
      </div> 
     </div> 
</body>

和CSS樣式：

body { 
    background-color: #c8c8c8; 
} 

#d1 { 
    background-color: #6c0922; 
    width: 500px; 
    border: 1px solid black; 
    filter: alpha(opacity = 100); 
} 

#d2 { 
    background-color: #146122; 
    width: 350px; 
    margin: 20px auto; 
    border: 1px solid black; 
} 

#d3 { 
    background-color: #0080c0; 
    height: 100px; 
    margin: 10px 65px; 
    filter: alpha(opacity = 0); 
    zoom: 1; 
}

第一眼看上去一切正常，我們預計#d3變得透明，我們可以看到#d2背景（墨綠）。但在IE7 \ 8中並不那麼簡單。在IE中，我們可以通過#d2和#d1看到body！（灰色）背景。你猜對了#d1的所有魔法。當我們刪除filter: alpha(opacity = 100);所有工作正常。

你可以問 - 但爲什麼你現在設置opacity = 1到不透明的元素？我不知道：）。可能出於某種原因，您應該使用此行爲。非常有趣和意外的行爲。

你可以用jsFiddle這個例子來玩。

來源

2011-01-06 Kai

您使用的是哪個版本的jQuery？ – 2011-01-06 13:31:16

這更多的CSS/HTML問題，它是jQuery，如果你刪除所有的jQuery，並使其純CSS，你會看到問題將持續存在。從來沒有遇到過這樣的事情，有趣的是找出原因和解決辦法。 – Dan 2011-01-06 13:47:52

@Kees：我使用1.4.4版本 – Kai 2011-01-06 13:56:08

IE8不支持CSS屬性opacity您必須使用MS過濾器來代替：

opacity: "0", 
    filter: alpha(opacity = 50); /*change value to suit your needs*/

這還不是全部，但。這隻適用於元素的位置，謝天謝地，你已經這樣，它會工作。爲了將來的參考，如果你沒有任何位置設置，你可以添加zoom: 1到選擇器，它將在IE中工作:)

來源

2011-01-06 13:21:34 Kyle

我有同樣的問題。我做了大量的搜索和閱讀，發現IE8不使用其他瀏覽器使用的不透明度的CSS。這裏是我的CSS，我用IE8：

#loading-div-background { 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    background:gray; 
    width:100%; 
    height:100%; 
    /* Next 2 lines IE8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); 
}

但是，它仍然沒有與崗位工作：固定的，但一旦我把位置是：絕對的它開始工作。

來源

2013-02-15 18:52:28

IE8中不透明的問題

回答

相關問題