IE:如何在相对定位的div下显示绝对定位的div

发布于 2024-12-07 13:03:35 字数 996 浏览 1 评论 0原文

目前我正在创建一个布局,它需要一个具有背景图形以及顶部和底部的 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:

enter image description here

#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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

月下凄凉 2024-12-14 13:03:35

解决了问题。事实上,我的问题中显示的 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.

得不到的就毁灭 2024-12-14 13:03:35

添加一个清晰的...

<div id="lower_bg">
      blabla floating divs
      <div style="clear:both"></div>
</div>

Add a clear...

<div id="lower_bg">
      blabla floating divs
      <div style="clear:both"></div>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文