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>

with

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

（请参阅实际站点 http://blog.stephenkiers.com/）

原因它是这样编码的，因为左侧内容很重要，我想成为视障访问者访问的第一个数据；而不是他们每次都必须跳过所有的绒毛！

该代码适用于 FF、IE8、Safari 等；但在 IE7 中，右侧 div 会清除浮动 div。

我很乐意接受您的任何建议。我对如何解决这个问题有一些想法；但它们都涉及相当大的重写。

谢谢！

Answer 1

为什么不尝试将内容包装成两列，如下所示 示例

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