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

时间:2011-09-30 12:18:33

标签: css internet-explorer css-position

目前我正在创建一个布局,这需要一个具有背景图形和顶部和底部的div。我创建的标记在FF中运行良好,看起来像这样:

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>

在IE(7,8&amp; 9)中,upper和lower_bg div是不可见的。有谁知道如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

解决了这个问题。实际上,我的问题中显示的html没有重现结果。经过一番摆弄后,我发现IE处于怪异模式。我通过xslt和forgott创建了html来添加xsl:output标签并将其设置为html。在这样做之后,使用布局将IE很好地归结为版本7。

答案 1 :(得分:0)

添加一个明确的...

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