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 的问题行为，因为我相信应用程序不需要在每个浏览器中看起来都一样。

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

1 个答案: