IE8不透明度问题答案

【问题标题】：Problem with opacity in IE8IE8不透明度问题
【发布时间】：2011-06-04 15:34:18
【问题描述】：

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

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

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

【问题讨论】：

您使用的是哪个版本的 jQuery？
这更像是一个 CSS/HTML 问题，它是 jQuery，如果你删除所有 jQuery 并使其成为纯 CSS，你会发现问题仍然存在。从来没有遇到过这样的事情，想知道原因和解决办法会很有趣。
@Dan：同意，这更像是 CSS/HTML 问题

标签： html css internet-explorer-8 internet-explorer-7 opacity

【解决方案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 一起使用，但是一旦我放入 position:absolute 它就开始工作了。

【讨论】：

有多少次来自 SO 的回答为我节省了时间？足以让我想帮助别人！ :-)

【解决方案2】：

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

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

这还不是全部。这仅在元素被定位时才有效，幸好你已经有了它，所以它可以工作。如果您没有设置任何位置以供将来参考，您可以将 zoom: 1 添加到选择器中，它将在 IE 中工作:)

【讨论】：

对于 IE6/7，您可能需要 filter，对于 IE8，您可能需要 -ms-filter。 IE9 确实支持opacity。除了 filter 之外，您还需要指定 opacity 才能使其适用于所有浏览器。
我记得如果浏览器是 IE，jquery 会处理 'opacity' 键（如果你从 jquery 设置它，它将是 'filter: ...' 参数）。但如果我错了，请纠正我。
这不是真的，他正在使用 jQuery 更改 css。他这样做的方式是，jQuery 会自动处理跨浏览器的兼容性。如果你仔细看，divs 在 IE 中是透明的，但在 div#source 的情况下，它甚至是它的父级，而且只有它们相交的地方也是透明的，这就是他的问题所在
正如我提到的我使用 jQuery，您可以在 IE8 中尝试我的示例，按 F12 并检查#source 元素。可以看到 jQuery 设置了“filter: alpha(opacity=0); ZOOM: 1;”属性自动，但在 Firefox 例如它等于“不透明度：0;”
这对我不起作用。具有固定位置元素的 IE8 中完全忽略了过滤器不透明度。