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 が画面からはみ出してしまいます。nav & content を 2 セル テーブルに置き換えても同じです。

IE7でこれを他のすべてと同じようにレンダリングするにはどうすればよいですか?

4

1 に答える 1

1

コンテンツ要素のスタイルに追加"display: inline-block;"すると、IE7は他のブラウザーと同じようにレンダリングされます。

これが更新されたjsfiddleです。

于 2012-07-12T16:57:38.423 に答える