为什么此模态的透明背景仅在 IE8 中由子元素继承？

Question

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

提前非常感谢。

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

 <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 示例在这里

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