Question

我的布局包含左侧垂直导航和主要内容区域。主要内容区域有一些信息浮动，其内容可能比浏览器窗口宽。这适用于我想要的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中正确呈现为：
enter image description here

但在IE7中，它显示为：
IE7 broken

我知道我可以使用“并排”div来与父级中的display: inline-block和white-space: nowrap一起使用，但是内容div的宽度会扩展为包含其内容的完整大小，从屏幕上推出正确的extraInfo div。如果我更换nav＆amp;含有2个单元格表的内容。

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

Answer 1

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

这是updated jsfiddle。

IE7将内容推送到浮动状态

1 个答案: