[英]IE7 CSS z-index issue not apparent on any other browser
I have an issue with CSS z-index on IE7 that I cannot seem to get to the bottom of. 我在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>
I have an overlay that appears on page load called r_box
我有一个出现在页面加载中的叠加层,称为
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;
}
However, the problem I am having on IE7 only is that on page load the screen
div is always on top of r_box
. 但是,我仅在IE7上遇到的问题是,在页面加载时,
screen
div始终位于r_box
顶部。 I have tested this on IE8, IE9, FF, Safari and Chrome and it works on all these browsers. 我已经在IE8,IE9,FF,Safari和Chrome上进行了测试,并且可以在所有这些浏览器上使用。 The only one where it is an issue is Internet Explorer 7.
唯一的问题是Internet Explorer 7。
Is this likely to be an issue with the screen
or r_box
DIVs or could this be something else? 这可能是
screen
或r_box
DIV的问题,还是其他原因?
This boiled down to a stacking context issue that was only apparent, as many have found, with Internet Explorer 7. 归结为一个堆栈上下文问题,正如许多人发现的那样,只有Internet Explorer 7才明显。
I decided to remove the problematic behaviour for IE7 only , as i'm a believer that an application does not need to look the same in every browser. 我决定仅删除IE7的问题行为,因为我相信应用程序不必在每个浏览器中都看起来相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.