0

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

这里演示的问题：http: //jsfiddle.net/UX2ac/

带测试页

<!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 中，它显示为：
IE7坏了

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

我怎样才能让 IE7 将其渲染为与其他所有内容相同？

4

1 回答 1

1

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

这是一个更新的 jsfiddle。

于 2012-07-12T16:57:38.423 回答