IE7 CSS z-index问题在任何其他浏览器上均不明显

Question

我在IE7上遇到CSS z-index问题，似乎无法深入了解问题。

#screen {
    display: none;
    background-image: url('/images/bg.png');
    background-repeat: repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    min-width: 100%;
    min-height: 100%;
    z-index: 10000;
}

<div id="screen"></div>

我有一个出现在页面加载中的叠加层，称为r_box

<div id="r_box">
    <div id="message_panel">
        ...Content in here...
    </div>
</div>

#r_box
{
    width: 335px;
    height: 337px;
    background: url("/images/panel.png") no-repeat scroll 0 0 transparent;
    position: fixed;
    margin-left: -150px;
    margin-top: -130px;
    left: 50%;
    top: 50%;
    z-index: 10001;
    display: none;
}

#r_box #message_panel {     
    color: #fff;
    z-index: 10001;
    bottom: 95px;
}

但是，我仅在IE7上遇到的问题是，在页面加载时， screen div始终位于r_box顶部。 我已经在IE8，IE9，FF，Safari和Chrome上进行了测试，并且可以在所有这些浏览器上使用。 唯一的问题是Internet Explorer 7。

这可能是screen或r_box DIV的问题，还是其他原因？

Answer 1

归结为一个堆栈上下文问题，正如许多人发现的那样，只有Internet Explorer 7才明显。

我决定仅删除IE7的问题行为，因为我相信应用程序不必在每个浏览器中都看起来相同。