Problem with opacity in IE8

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.

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.

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 :)

来源：https://stackoverflow.com/questions/4615147/problem-with-opacity-in-ie8

标签

html

css

internet-explorer-8

internet-explorer-7

opacity