为什么这个模态的透明背景只在ie8中被子元素继承？

Question

我正在尝试让我的网站在 ie8 上运行，我最初拥有的是 background-color:rgba(4, 4, 4, 0.8); - 这在其他浏览器上按预期工作，不幸的是 ie8 不适用于此，所以我使用下面的 css。 - 有谁知道如何避免子元素从父元素继承不透明度？

非常感谢。

我做了一个小提琴，但当我在 ie8 http://jsfiddle.net/up3uusxf/2/987654321@ 中打开它时似乎崩溃了

 <div id="overlay-modal">
      <div class="inner-modal">
        <p>Content in here</p>
      </div>
    </div> 

#overlay-modal
            {
                display:none;
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background-color:black;
                filter: alpha(opacity=80);
                        opacity: 0.8; 
                z-index:999;
            }
            .inner-modal
            {
                width: 400px;
                /*height: 270px;*/
                margin: 200px auto;
                background-color: white;
            }

Answer 1

您需要让您的叠加层成为它自己的容器，其中包含内容之外的内容才能正常工作。

jsfiddle example here

HTML

<div id="overlay-modal">
    <div class="inner-modal">
        <p>Content in here</p>
    </div>
    <div class="justTransparentMask"></div>
</div> 

CSS

#overlay-modal {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:black;
    z-index:999;
}
.inner-modal {
    width: 400px;
    /*height: 270px;*/
    margin: 200px auto;
    background-color: white;
}
.justTransparentMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    filter: alpha(opacity=80);
            opacity: 0.8; 
}