IE8中的不透明度问题

Question

我尝试解决IE8中出现的问题。 Html很简单：

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

当我在IE中设置（使用jQuery）“#source”元素的不透明度为“0”时，我可以看到#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 murk：

<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中使用此示例。

Answer 1

我遇到过同样的问题。 我做了很多搜索和阅读，发现IE8不使用css用于其他浏览器使用的不透明度。 这是我用于IE8的CSS：

#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);
}

然而，它仍然不适用于position：fixed，但是一旦我处于适当位置：绝对它开始工作。

Answer 2

IE8不支持您必须使用MS过滤器的CSS属性opacity ：

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

但事实并非如此。 这仅在元素定位时有效，幸好你已经有了它，所以它会起作用。 如果您没有任何位置设置以供将来参考，您可以将zoom: 1添加到选择器，它将在IE中工作:)

IE8中的不透明度问题

问题描述

2 个解决方案

解决方案1
7 2013-02-15 18:52:28

解决方案2
6 2011-01-06 13:21:34

IE8中的不透明度问题

问题描述

2 个解决方案

解决方案1 7 2013-02-15 18:52:28

解决方案2 6 2011-01-06 13:21:34

解决方案1
7 2013-02-15 18:52:28

解决方案2
6 2011-01-06 13:21:34