layout - IE7/IE8兼容渲染 float 布局错误

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/)

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

该代码适用于 FF、IE8、Safari 等；但在 IE7 中，右侧的 div 会清除 float 的 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;}