2包裝IE 7顯示問題

我有2個包裝，一個在另一個裏面，根據下面的html。第一個包裝器包含向下滾動的一個瓦片。包裝2有一個圖像940 X295px。在IE5 & IE8中精美地工作，但在IE7中，頁腳跳轉到wrapper2，文本向下，向下和向下延伸。2包裝IE 7顯示問題

這是我的html：

<div id="wrapper"> 
<div id="header"></div> 
<div id="wrapper2"> 
<div id="maincontent"></div> 
<div id="navigation"></div> 
</div> 
<div id="footer"></div> 
</div>

我提出結束的div everwhere沒有成功。

我對上面的div CSS是：

body { 
margin-top: 0px; 
padding-top: 0px; 
background-image: url(../images/body_vert_tile.gif); 
background-color: #C8BE86; 
background-repeat: repeat-x; 
} 
#wrapper { 
background-attachment: scroll; 
background-image: url(../images/wrapper_horiz_tile.gif); 
background-repeat: repeat-y; 
margin-right: auto; 
margin-left: auto; 
width: 940px; 
} 
#wrapper2 { 
background-image: url(../images/wrapper_2.jpg); 
height: 295px; 
margin-right: auto; 
margin-left: auto; 
background-position: left top; 
} 
#header { 
width: 940px; 
background-image: url(../images/header.jpg); 
height: 345px; 
margin-right: auto; 
margin-left: auto; 
} 
#maincontent { 
float: right; 
width: 630px; 
padding-right: 70px; 
padding-left: 10px; 
margin-top: -10px; 
} 
#maincontent_home { 
float: right; 
width: 420px; 
padding-right: 10px; 
padding-left: 10px; 
margin-top: -10px; 
} 
#secondary_content { 
float: right; 
width: 190px; 
padding-right: 70px; 
margin-top: 30px; 
padding-left: 20px; 
} 
#footer { 
background-repeat: no-repeat; 
background-position: left bottom; 
width: 940px; 
text-align: center; 
clear: right; 
background-image: url(../images/footer.jpg); 
height: 145px; 
margin-right: auto; 
margin-left: auto; 
#navigation { 
float: right; 
width: 130px; 
padding-right: 10px; 
padding-bottom: 10px; 
background-repeat: repeat-y; 
background-position: right top; 
padding-top: 5px; 
}

我拉我的頭髮。我應該忽略IE7嗎？我真的想克服這一點。唯一解決這個問題的方法是將包裝2放在標題下方，並在主要內容之前關閉。然後，我將margin設置爲內容的頂部，並將其導入與wrapper2中圖像高度相同的大小。它有效，但我不知道我是否應該這樣做。

您的幫助將不勝感激。

來源

2010-09-11 Georgina Sinclair