標頭在IE 7-8中混亂

Question

除了IE 7和8外，我正在處理的頁面在Chrome，Firefox，Opera和Safari（在Mac和Windows中）均顯示完美。 標頭應該看起來像這樣：

但是在IE中看起來像這樣：

在我們使用position: relative;之前position: relative; 用於我們的charity.css文件中的類container ，但是我不得不刪除它，因為它在IE w /我的下拉菜單中造成了問題。

有人可以幫幫我嗎？！ 我現在很沒主意:(

這是[ 頁面 ]（但是，我以后必須刪除鏈接）任何幫助將不勝感激！

編輯：這是jsfiddle： http : //jsfiddle.net/walahh/QwFL6/它的頁面並不完全相同...但是希望您能理解。

Answer 1

我能想到的唯一更改將導致您的標記發生重大變化。

基本上，我很確定這與不清除float:left和float:right元素有關。 IE因錯誤地將float屬性傳播到了不打算浮動的元素而臭名昭著。 為了避免這種情況-在浮動時-通常會執行以下操作...

CSS：

.fl { float: left; }
.fr { float: right; }
.clr { clear: both; }

然后在您的標記中執行以下操作：

<div>
  <div class="fl"></div> 
  <div class="fl"></div> 
  <div class="clr"></div><!-- This element stops float from going to unintended elements --> 
</div>

理想情況下，這是放置浮動元素以實現跨瀏覽器支持的方式。

如果無法修改標記，則可以嘗試添加空元素，並且要clear: both; 樣式，作為浮動元素的“最后一個”。 所以...以您的ul＃secondNav為例，可以嘗試一下...

<ul id="secondNav">
  <li class="stuff"></li>
  <li class="stuff"></li>
  <li class="stuff"></li>
  <li style="clear: both;"><!-- Leave empty --></li>
</ul>

Answer 2

所以顯然修復很簡單。。。我太復雜了。

我（也）不知道的是“在IE中，z索引不能高於包含元素的z索引。”

所以我回到了原始文件，那里有.container{width:940px; margin:0 auto; position: relative;} .container{width:940px; margin:0 auto; position: relative;} .container{width:940px; margin:0 auto; position: relative;}並保持原樣。 然后為#header{.....; z-index:1; }添加z-index值#header{.....; z-index:1; } #header{.....; z-index:1; } #header{.....; z-index:1; }和#mainNav{...; z-index:2;} #mainNav{...; z-index:2;}這樣就解決了...

• 隱藏的下拉菜單
• 頭弄亂了

這是修改后的代碼： http : //jsfiddle.net/walahh/QwFL6/3/

希望這對某人有所幫助:)並感謝所有花時間閱讀我的文章並為我提供幫助的人。