IE:如何在相对定位的div下显示绝对定位的div
目前我正在创建一个布局,它需要一个具有背景图形以及顶部和底部的 div。我创建的标记在 FF 中运行良好,如下所示:
#wrapper {
width: 520px;
padding: 2px;
position: relative;
float: left;
z-index: 4000;
}
#upper_bg {
background:url(images/header_top.png);
position:absolute;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
#row_wrapper {
position:relative;
float: left;
z-index: 3000;
}
#lower_bg {
background:url(images/header_bottom.png);
position:absolute;
bottom:0px;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
<div id="wrapper">
<div id="upper_bg">
<!-- ie fix for displaying empty divs -->
</div>
<div id="row_wrapper">
... content!
</div>
<div id="lower_bg">
<!-- -->
</div>
</div>
在 IE 中 (7,8 & 9) 但是 upper 和 lower_bg div 是不可见的。有人知道如何解决这个问题吗?
currently I'm creating a layout, which requires a div having background graphics and the top and the bottom. My mark-up which I created works fine in FF and looks like this:
#wrapper {
width: 520px;
padding: 2px;
position: relative;
float: left;
z-index: 4000;
}
#upper_bg {
background:url(images/header_top.png);
position:absolute;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
#row_wrapper {
position:relative;
float: left;
z-index: 3000;
}
#lower_bg {
background:url(images/header_bottom.png);
position:absolute;
bottom:0px;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
<div id="wrapper">
<div id="upper_bg">
<!-- ie fix for displaying empty divs -->
</div>
<div id="row_wrapper">
... content!
</div>
<div id="lower_bg">
<!-- -->
</div>
</div>
In IE (7,8 & 9) however the upper and lower_bg divs are invisible. Anybody knows how to fix this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
解决了问题。事实上,我的问题中显示的 html 没有重现结果。经过一番摆弄,我发现 IE 处于怪异模式。我通过 xslt 创建了 html,但忘记添加 xsl:output 标记并将其设置为 html。这样做之后,IE 的布局就降到了 7 版。
solved the problem. Indeed, the shown html in my question didn't reproduce the result. After a bit fiddling, I found out that IE was in quirks mode. I created the html via xslt and forgott to add the xsl:output tag and set it to html. After doing so, IE was fine down to version 7 with the layout.
添加一个清晰的...
Add a clear...