0

我在 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 上遇到的问题是页面加载时screendiv 始终位于r_box. 我已经在 IE8、IE9、FF、Safari 和 Chrome 上对此进行了测试，并且它适用于所有这些浏览器。唯一存在问题的是 Internet Explorer 7。

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

4

1 回答 1

0

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

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

于 2012-08-29T10:19:42.377 回答