IE7 将内容下推到浮动答案

【问题标题】：IE7 pushes down content past floatIE7 将内容下推到浮动
【发布时间】：2012-07-12 11:51:39
【问题描述】：

我有一个带有左侧垂直导航和主要内容区域的布局。主要内容区域有一些信息向右浮动，其内容可能比浏览器窗口宽。这适用于 Firefox/Chrome/IE8，但对于 IE7，宽内容会被推到导航菜单下方。

带测试页

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.nav {
   float: left;
   width: 5em;
   background: lightgreen;
}
.content {
   background: lightyellow;
   margin-left: 5em;
}
.extraInfo {
   background: lightblue;
   float: right;
}
</style>
</head>
<body>
   <div class="nav">
      left<br/>
      nav<br/>
      menu<br/>
      items
   </div>
   <div class="content">
      <div class="extraInfo">
         Right info!
      </div>
      <p>Page Desc</p>
      <!-- <h3>Content</h3> -->
      <div style="white-space: nowrap">
         stuff stuff stuff stuff stuff stuff stuff stuff stuff 
      </div>
   </div>
</body>
</html>

这在 IE8 中正确呈现为：

但在 IE7 中显示为：

我知道我可以让“并排”的 div 与父级中的 display: inline-block 和 white-space: nowrap 一起工作，但随后内容 div 的宽度会扩大到包含其内容的完整大小，从而推动正确的 extraInfo div 离开屏幕。如果我将 nav & content 替换为 2 单元格表格，也是一样。

如何让 IE7 将其呈现为与其他所有内容一样？

【问题讨论】：

标签： html css internet-explorer css-float

【解决方案1】：

将"display: inline-block;" 添加到内容元素的样式中，它将强制 IE7 呈现与其他浏览器相同的内容。

这是updated jsfiddle。

【讨论】：

是的，但关键是内容会比窗口宽。我们可以用wwww.test.com/thisIsAreallylonglinkthatwillcauseproblems/… 替换“stuff”字样，它仍然会坏掉。
是的，这很奇怪，因为 IE7 支持“nowrap”，所以我现在正在尝试使用标记做一些不同的事情
我不想将所有内容都限制在 div 的宽度上。我希望它带有滚动条，就像在 IE8 屏幕截图中一样。我唯一不希望它做的就是向下推过菜单。
我很难理解这一点，但我认为我找到了解决方案。您在父元素上尝试了 display: inline-block 没有任何运气，但它似乎对内容元素本身有效。
就是这样！不能说我明白为什么，但我愿意对 IE 7 黑魔法举起双手继续前进。谢谢！