IE8 不透明度问题

发布于 2024-10-10 19:30:02 字数 2061 浏览 7 评论 0原文

我尝试解决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 上尝试实时示例。
更新：
经过一些实验我找到了解决方案。这确实是 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 中使用此示例。

原文

I try to solve a problem that appears in IE8. Html is very simple:

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

When I set (using jQuery) opacity of "#source" element with "0" in IE I can see the background of #overlay, not #imgcontainer > div, but why?
There is a javascript code:

$(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"
    });
});

You can try live example on jsFiddle.
UPD:
After some experiments I found the solution. It's really html\css issue, so I made some refactoring of code and remove jQuery tag. Imagine we have such html murk up:

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

and the css styles:

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

At first look all is ok, we expect that #d3 become transparent and we can see #d2 background(dark green). But not so simple in IE7\8. In IE we can see body!(grey) background through #d2 and #d1. All magic in #d1 you guessed it. When we remove filter: alpha(opacity = 100); all work correctly.

You can ask - but why you set opacity = 1 to the element which is non-transparent now? I don't know :). May be in some reason you should use this behavior. Very interesting and unexpected behavior.

You can play with this example in jsFiddle.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦亦如幻 2024-10-17 19:30:03

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

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

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

IE8 doesn't support the CSS attribute opacity you have to use an MS filter instead:

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

That's not all though. This only works when the element is positioned, thankfully you have that already so it will work. For future reference if you don't have any position set, you can add zoom: 1 to the selector and it will work in IE :)

回复收藏 0 原文

鹤仙姿 2024-10-17 19:30:02

我有同样的问题。我做了很多搜索和阅读，发现 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，它就开始工作。

I had the same issue. I did a lot of searching and reading and found IE8 doesn't use the css for opacity other browsers use. Here is my CSS that I used for 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);
}

However, it still didn't work with position:fixed, but once I put in position:absolute it started working.

回复收藏 0 原文

~没有更多了~