IE7/IE8兼容渲染浮动布局错误答案

【问题标题】：IE7/IE8 Compatible rendering floated layout wrongIE7/IE8兼容渲染浮动布局错误
【发布时间】：2011-05-11 01:25:38
【问题描述】：

我有一个带有右侧边栏和左侧主要内容区域的网站。代码如下所示：

<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 会清除浮动的 div。

我希望您有任何建议。我对如何解决它有一些想法；但它们都涉及相当大的重写。

谢谢！

【问题讨论】：

标签： layout css internet-explorer-7 css-float ie8-compatibility-mode

【解决方案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;}

【讨论】：