IE7將內容往下推浮動

我有一個左側垂直導航和主要內容區域的佈局。主要的內容區域有一些信息是正確的，其內容可能比瀏覽器窗口更寬。這對於我想要的Firefox/Chrome/IE8是如何工作的，但是對於IE7，寬泛的內容會被推到導航菜單下方。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從屏幕中推出。同樣的事情，如果我用2格表替換nav &內容。

我怎樣才能讓IE7呈現與其他所有相同的內容？

來源

2012-07-12 Jason Viers

將"display: inline-block;"添加到您的內容元素的樣式，它將強制IE7呈現與其他瀏覽器相同。

這是updated jsfiddle。

來源

2012-07-12 16:57:38 BumbleB2na

是的，但重點是會有比窗口更寬的內容。我們可以用http://wwww.test.com/thisIsAreallylonglinkthatwillcauseproblems/waytoowide/page.aspx?stateInfo=agaeruhaeaergakerhaerghaerg替換「東西」字樣，它仍然會中斷。 – 2012-07-12 16:59:46

是的，它是奇怪的，因爲IE7支持「nowrap」，所以，我現在嘗試幾個不同的事情與標記 – BumbleB2na 2012-07-12 17:07:44

我不想約束一切的div的寬度。我想要一個滾動條，就像在IE8屏幕截圖中一樣。我不希望它做的唯一事情是推下菜單。 – 2012-07-12 17:49:30

IE7將內容往下推浮動

回答

相關問題