IE8中不透明度的问题

Question

IE8中不透明度的问题

htmlcssinternet-explorer-8internet-explorer-7opacity

3

我试图解决在IE8中出现的问题。HTML非常简单：

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

当我使用jQuery将“#source”元素的不透明度设置为“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上尝试实时示例。
更新：
经过一些实验，我找到了解决方案。这确实是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);时，一切工作正常。

您可能会问 - 为什么将不透明的元素的不透明度设置为1？我不知道：）。也许在某些情况下，您应该使用这种行为。非常有趣和意外的行为。

您可以在jsFiddle中尝试这个例子。

- Kai

你使用的是哪个版本的jQuery？ - Kees C. Bakker

这更像是CSS / HTML的问题，而不是jQuery的问题。如果您删除所有jQuery并使其成为纯CSS，则会发现问题仍然存在。从未遇到过这样的情况，发现原因和解决方法将是有趣的事情。 - Dan

@Dan：同意，这是更多的CSS/HTML问题。 - Kai

2个回答

6

IE8不支持CSS属性opacity，你需要使用MS滤镜来代替：

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

不过，这并不是全部。这仅适用于已定位的元素，谢天谢地，您已经完成了它，所以它会起作用。以后如果您没有设置任何位置，您可以将zoom: 1添加到选择器中，它将在IE中起作用 :)

- Kyle

1

你可能需要在IE6/7中使用filter，在IE8中使用-ms-filter。IE9支持opacity。为了使它在所有浏览器中都能正常工作，您仍然需要指定opacity以及filter。 - Spudley

据我所记，如果浏览器是IE（如果您从jquery中设置它，则为'filter：...'参数），则jquery会处理'opacity'键。但如果我错了，请纠正我。 - Peter Porfy

这不是真的，他正在使用jQuery更改CSS。而且他所做的方式，jQuery会自动处理跨浏览器兼容性。如果你仔细看，div在IE中是透明的，但在div#source的情况下，它甚至使其父级，在它们相交的地方也变成透明的，这就是他的问题所在。 - Dan

正如我所提到的，我使用jQuery，您可以在IE8中尝试我的示例，按F12并检查#source元素。您会发现jQuery自动设置了“filter: alpha（opacity = 0）; ZOOM：1;”属性，但例如在Firefox中它等于“opacity：0;”。 - Kai

这对我不起作用。在IE8中，固定位置元素的过滤器不透明度完全被忽略。 - Cerin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Drinkard · Accepted Answer

我也遇到了同样的问题。我进行了大量搜索和阅读，发现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时仍然无法正常工作，但是一旦我改为position:absolute，它就开始正常工作了。