IE7/IE8兼容渲染浮動佈局錯誤

Question

我有一個網站，右邊欄和左主內容區域。代碼如下所示：

<div class="leftside">leftsidecontent</div> 
<div class="leftside">leftsidecontent</div> 
<div class="leftside">leftsidecontent</div> 
<div class="leftside">leftsidecontent</div> 
<div class="rightside">rightsidecontent</div> 
<div class="rightside">rightsidecontent</div> 
<div class="rightside">rightsidecontent</div> 

與

.leftside 
{ 
    float:left; 
    width:710px; 
} 
.rightside 
{ 
    margin-left:720px; 
} 

（見http://blog.stephenkiers.com/實際的網站）

原因，它是編碼這種方式是如此，由於leftsidecontent是重要的，我想成爲視障人士訪問的第一批數據;而不是每次都跳過所有的絨毛！

該代碼適用於FF，IE8，Safari等;但在IE7中，右側divs清除了浮動的div。

我很樂意提供任何建議。我對如何解決這個問題有一些想法。但他們都涉及很大的重寫。

謝謝！

Answer 1

你爲什麼不嘗試包裹內容的東西爲兩列這樣example

的CSS：

.leftside { 
    float:left; 
    width:710px; 
} 

.rightside { 
    float: left; 
    margin-left: 20px; 
} 

.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; } 

的HTML：

<div class="leftside"> 
    <div class="contentBlock"> 
    <p>main stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>main stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>main stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>main stuff goes here</p> 
    </div> 
</div> 
<div class="rightside"> 
    <div class="contentBlock"> 
    <p>secondary stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>secondary stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>secondary stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>secondary stuff goes here</p> 
    </div> 
</div> 

這樣的左側和右側只是佈局元素，並與內容隔離。

另一個好的建議爲視障遊客是有在頁面頂部鏈接，允許用戶直接跳到內容部分，並從佈局與CSS隱藏起來：

.skipToLinks { position: absolute; top: -100px;}