下拉菜單在ie7或ie8中無法正確顯示

我目前正在開發一個項目，我遇到了下拉菜單的問題，以及它在ie7和ie8中的顯示方式。下拉菜單在ie7或ie8中無法正確顯示

你可以在這裏查看：

這裏是我使用的CSS：

nav { width:1026px; 
height: 50px; 
background-image:url(../img/nav.png); 
padding:0 0px 0 0px; 
text-align:center; 
margin-bottom:30px;

}

nav ul li { 
display:inline-block; 
position:relative;

}

nav ul li div.sub { 
display:none; 
position:absolute; 
background-color:#003e88; 
top:38px; 
width:260px; 
text-align:left; 
border-radius: 0px 0px 7px 7px; 
-o-border-radius: 0px 0px 7px 7px; 
-moz-border-radius: 0px 0px 7px 7px; 
-khtml-border-radius: 0px 0px 7px 7px; 
-webkit-border-radius: 0px 0px 7px 7px;

}

nav ul li div.sub a{ 
background-image:none;

}

nav li a { 
padding:13px 20px 11px 20px; 
display:inline-block; 
margin-top:-10px; 
background-image:url(../img/nav-divider.png); 
background-position:top right; 
background-repeat:no-repeat; 
font-family:champ, myriad, Arial, Helvetica, sans-serif; 
font-size:16px; 
text-transform:uppercase; 
font-weight:bold; 
text-decoration:none; 
margin-right:-4px;

}

nav li a:hover {border: 0; 
background-image:url(../img/hover.png);

}

nav li.current a { 
color:#47cacd;

}

我對此感到迷茫，任何幫助將不勝感激，謝謝。

來源

2012-02-07 Suzi Larsen

順便說一句，你的下拉菜單可顯示多達上的左側和圖片的鏈接後面在歌劇院升降椅。 – MetalFrog 2012-02-07 12:50:29

你的問題是更簡單，然後，IE瀏覽器出於某種原因不接受你的菜單導航項的display:inline-block聲明。雖然你可以通過使用由HTML5的樣板提供的.oldie類並將其設置爲float:left定位，而不是您在IE nav菜單修復它，所以嘗試這在你的CSS：

.oldie nav li { 
    float:left; 
    z-index:9999; 
}

順便說一句，你需要爲了申報z-index價值，你的導航元素，以及爲他們在一切之上出現，試試這個：

nav ul li { 
    z-index: 999; 
}

來源

2012-02-07 13:02:18

謝謝，修復它。我一直在試圖弄清楚這個問題。我也注意到我能夠通過使用明星盈方來做到這一點，我不知道這是否是一種好的做法，例如： nav ul li {float：left; } – 2012-02-07 15:15:36

@SuziLarsen明星黑客將只瞄準某些版本的IE我相信，當你有一個通用類針對舊瀏覽器時，它確實不需要，所以我會建議這種方法用於免費的樣式表。另外，如果答案滿足您的問題，請勾選綠色選中標記以更輕鬆地進行分類並搜索未來的海報，以此標記爲正確。 – 2012-02-07 15:21:17

非常感謝，我使用的是像你說的那樣的通用課程，它工作得很好。我的答案也是正確的，我對這個網站是新手，所以現在還是有點綠色。 :) – 2012-02-08 15:04:26

我覺得HTML 5元素在IE中是不支持的，如果你把一個ID爲nav的DIV放到你的CSS上，它就可以工作。如果你想使用HTML5，那麼有JavaScript的黑客可以幫助你:)

來源

2012-02-07 12:38:58

下拉菜單在ie7或ie8中無法正確顯示

回答

相關問題