IE瀏覽器：如何顯示相對定位的div下的絕對定位的div

當前我正在創建一個需要具有背景圖形和頂部和底部的div的佈局。我這是我創建精品工程在FF，看起來像這樣加價：IE瀏覽器：如何顯示相對定位的div下的絕對定位的div

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 & 9），然而上部和lower_bg的div是看不見的。任何人都知道如何解決這個問題？

來源

2011-09-30 yan.kun

請停止使用此類結構的定位。浮動更簡單，更好，更靈活的解決方案。此外，請檢查您的網站是否以怪癖模式呈現，這通常會導致Internet Explorer出現問題。 – duri

你的例子看起來沒有像我這樣，所以一定有一些缺失。你可以創建一個jsfiddle或給一個鏈接？ – Rob

解決了這個問題。確實，我的問題中顯示的html沒有重現結果。稍微擺弄一下後，我發現IE瀏覽器處於怪異模式。我通過xslt和forgott創建了html，添加了xsl：output標籤並將其設置爲html。這樣做後，IE瀏覽器很好地降低到版本7的佈局。

來源

2011-10-01 07:18:22

添加一個明確的...

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

來源

2011-09-30 12:52:14

IE瀏覽器：如何顯示相對定位的div下的絕對定位的div

回答

相關問題