我的div的高度在IE和Firefox中不一樣

我在處理IE中另一個div內div的垂直對齊時遇到了問題。我的div的高度在IE和Firefox中不一樣

我的HTML代碼如下：

<div class="header"> 
    <div id="mainMenu"> 
     <!--Here goes my main menu--> 
    </div> 
</div>

我的風格是如下：

#mainMenu 
{ 
/*background-color: #FFF;*/ 
font-family: fantasy, cursive, Serif; 
font-size:16px; 
/*border-bottom:1px solid #000000;*/  
height:125px; 

position:relative; 

} 

.header { 
top: 0px; 
    color:#FFA500; 
z-index:1000; 
height:120px; 
padding:8px 2px 8px 15px; 
overflow:hidden; 
-moz-border-radius:0 0 10px 10px; 
-webkit-border-radius:0 0 10px 10px; 
border-radius:0 0 10px 10px; 
-moz-box-shadow:0 1px 3px #777; 
-webkit-box-shadow:0 2px 3px #777; 
box-shadow:0 2px 3px #777; 
background: url("../images/plusoneurls_resize.png") repeat scroll 0 0 transparent; 
}

現在在Firefox中，我的主要項目在底部顯示當我馬埃的高度屬性爲120px（100％）的樣式附加到#mainMenu，但它不適用於IE。

我甚至嘗試給頂部：100％，在Firefox中顯示很好，但在IE中，它已經溢出到主要內容中。

如何爲此設計解決方法？

來源

2011-08-31 debaShish

我想您所描述的問題取決於菜單的內部HTML和CSS。 Divs自己沒有造型，所以我認爲他們不會「破」，即使在怪癖模式下也是如此。 – ANeves

使用CSS重置。 YUI provides a good one.

來源

2011-08-31 12:30:35 desbest

-0：如果你不知道它在做什麼，或者它是如何解決「你的問題」，我會建議不要使用CSS重置。 – ANeves

檢查您是不是在怪癖模式。

如果您的HTML代碼頂部沒有有效的<!DOCTYPE>聲明，IE將進入怪癖模式。這種模式改變了CSS的許多方面，並且對元素的高度和寬度有相當戲劇性的影響。

怪癖模式是一個遺留功能，不應該再使用，所以你應該始終確保你有一個有效的文檔類型。你沒有提供足夠的代碼讓我知道你是否有一個，但如果沒有，你需要添加一個。

如果你不知道用什麼的doctype，只需使用HTML5文檔類型，就像這樣：

<!DOCTYPE html>

在你的HTML代碼（第一行最高層將這個，在<html>標籤之前或任何東西）。

來源

2011-08-31 12:40:34 Spudley

我添加了一個有效的文檔類型，但它仍然沒有按預期工作。那裏有任何IE黑客？ – debaShish

添加doctype有什麼影響？也許你可以設置一個測試頁面，告訴我們到底發生了什麼問題;也許使用http://www.jsfiddle.net - 這對調試這種事情很好。 – Spudley

[link]（http://jsbin.com/asikut/6/edit#html,live）...注意到ff和ie的菜單項的顯示不同。 – debaShish

-1

確保兩個瀏覽器上的縮放級別都設置爲100％。（按Ctrl + 0）

來源

2011-08-31 12:40:48

-1：這將如何使溢出變化？ – ANeves

#mainMenu 
{ 
position: absolute; 
bottom: 0; 
left: 0; 
} 

.header 
{ 
position: relative; 
}

How (Not) To Vertically Center Content

肯定會推薦使用CSS，但也說明和示例使用表

來源

2011-08-31 13:48:33

我的div的高度在IE和Firefox中不一樣

回答

相關問題