在處理Internet Explorer兼容性模式時並排使用Div div

我正在設計一個使用MVC-3框架的網站。雖然沒有使用IE兼容模式，它正確顯示，看起來像這樣：在處理Internet Explorer兼容性模式時並排使用Div div

代碼爲了這個，我現在用的就是這樣的：

<div id="header"> 
     <div id="title">         /* NUMBER 1 */ 
      <img src="@Url.Content("~/Content/A_picture.png")" /> 
     </div> 
     <div id="menucontainer">       /* NUMBER 2 */ 
      <ul id="menu"> 
       /* some menu items*/ 
      </ul> 
     </div> 
</div> 
<div id="main">           /* NUMBER 3 */ 
    @RenderBody() 
</div>

有一天，我有必要強制我的代碼相信它運行的是其他格式化一致性問題的IE7。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

但現在，強迫這打破了我的初始網站佈局。當使用IE7的強制，它看起來像這樣：

感謝您通過解釋和我一起住。現在我的問題 - 我怎麼操縱我的div部分，現在被破壞，就像他們在我的第一張照片中出現的一樣，同時仍然強制仿效IE7？

任何想法，想法和建議，非常感謝。

編輯：CSS

CSS的一些作品，我相信可幫助解決這一問題如下。對不起，我顯然應該最初包括這個。

header, 
footer, 
nav, 
section { 
    display: block; 
} 

header, #header { 
    position: relative; 
    margin-bottom: 0px; 
    padding: 0; 
} 

nav, 
#menucontainer { 
    margin-top: 40px; 
} 

div#title { 
    display: block; 
    float: left; 
    text-align: left; 
}

來源

2012-10-23 Johnny_Orion

提供你的CSS會有幫助。 – RedFilter

我辯論過這樣做，但是我認爲可能會影響代碼的部分在我更改時沒有改變任何內容。我對這個東西不太擅長;但是我會編輯CSS回來。 –

HTML通過驗證嗎？我絕不會依賴兼容模式。您必須使用實際的瀏覽器版本才能完全確定。 – Sparky

也許你需要使用vertical-align，爲即你sholud設置水木清華這樣的：

#id_top_elements { 
    display: table-cell; 
    vertical-align: bottom; 
}

，但如果你能證明你的CSS可能heplfull;）

或嘗試水木清華像這樣：

<!--[if lt IE 8]> 
<style> 
    #id_top_elements { 
     position: relative; 
     top: -50% 
    } 
</style> 
<![endif]–>

但現在你需要添加一些頂層元素的包裝，它必須有position: absolute;

來源

2012-10-23 14:08:07 Lukas

爲了澄清，您建議我將圖片項目的數字1和2換成新的div，並將該新div的樣式設置爲您爲#id_top_elements所寫的內容？ –

yeap，這就是我的建議:) – Lukas

非常感謝您的建議，我將不得不學習此實施！ –

，而不是使用花車，你也可以使用

 display: inline-block; /*which works for most browsers including newer versions of ie, the following two lines are the fix for older versions of ie.*/ 
    *display: inline; 
    zoom: 1;

做到這一點的任何對象/元素需要「坐」旁邊的另一個對象/元素

來源

2012-10-23 14:29:12 bluebela84

謝謝你的建議！ –

謝謝Stack Overflow，感謝你的存在，並感謝你，@ bluebela84，出生於:-)。這解決了我在IE兼容模式下垂直堆砌「div in line-block」的問題。 – bvgheluwe

令人吃驚的是上，該解決方案簡單地添加一行到#menucontainer CSS是這樣的：

nav, 
#menucontainer { 
    margin-top: 40px; 
    display: inline; 
}

添加的行是「顯示：內聯」，我把它添加到數2格在我的DIAGR上午。

謝謝大家對這個話題的重視！

來源

2012-10-23 18:51:51

在處理Internet Explorer兼容性模式時並排使用Div div

回答

相關問題