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;}