CSS下拉菜單在IE9中不起作用

更新：我使用的是Yahoo的SiteBuilder軟件，由於我懷疑問題可能與doctype標題有關，因此我在SiteBuilder上進行了Google搜索。有人在另一個論壇建議增加以下給提問者的網站CSS下拉菜單在IE9中不起作用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

我想補充說，到我的網頁HTML的頂部。該下拉菜單在IE9中工作，但在IE和Firefox中，文本，登錄框等都堵塞在屏幕的左上角。所以它似乎是Doctype中的一些東西，但還有其他的事情正在將所有的東西都轉移到不合適的地方。基於這種發展的任何建議？

謝謝！

我將首先表明我是一個完全的新手，當涉及到這個東西。所以請原諒我，如果我提出基本問題或需要過於明確的指示。

基本上，我想添加一個下拉導航菜單到我的新網站。我在網上找到一個代碼，並通過一些試驗和錯誤瞭解如何使它成爲我自己的代碼。一切似乎都很好，直到我在IE9上測試它。當我將指針懸停在它上面時，下拉列表不會下拉。它在Firefox（我的主瀏覽器）中正常工作，一位朋友證實它可以在Chrome上運行。

有些Google搜索以後，我可以看到這是一個相當普遍的問題。我試圖找到一個可行的解決方案，但是建議的修復程序不起作用，或者我真的不明白他們在說什麼。正如我所說，我是一個努力理解這種新語言的新手。

這裏是網站：http://gardenstatelegacy.com/GSL2_Test_Home.html

這是一項正在進行的工作。「訂閱」鏈接適用於Firefox和IE9。「資源」標籤應該有下拉菜單。目前在該下拉列表中工作的唯一鏈接是「顧問目錄」。我在IE9中使用「兼容性視圖」選項嘗試了它，但它沒有做任何事情。

我正在複製和粘貼下面使用的代碼。如果有人可以看到爲什麼這與IE不兼容，請告訴我，我該如何解決它。再次，我是新手，所以請簡單點。預先感謝您的任何幫助！

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css">  
     body { 
      padding: 0; 
      margin: 0; 
     } 

     #wrap { 
      width: 100%; 
      height: 50px; 
      margin: 0; 
      z-index: 99; 
      position: relative; 
      background-color: #660000; 
     } 

     .navbar { 
      height: 50px; 
      padding: 0; 
      margin: 0; 
      position: absolute; 
      border-right: 1px solid #660000; 
     } 

     .navbar li { 
      height: 50px; 
      width: 142px; 
      float: left; 
      text-align: center; 
      list-style: none; 
      font: normal bold 12px/1.2em Arial, Verdana, Helvetica; 
      padding: 0; 
      margin: 0; 
      background-color: #660000;     
     } 

     .navbar a {       
      padding: 18px 0; 
      border-left: 1px solid #C4BD97; 
      border-right: 1px solid #C4BD97; 
      text-decoration: none; 
      color: white; 
      display: block; 
     } 

     .navbar li:hover, a:hover { 
      background-color: #660000; 
     } 

     .navbar li ul { 
      display: none; 
      height: 50px;         
      margin: 0; 
      padding: 0;        
     } 

     .navbar li:hover ul { 
      display: block;         
     } 

     .navbar li ul li { 
      background-color: #660000; 
     } 

     .navbar li ul li a { 
      border-left: 1px solid #C4BD97; 
      border-right: 1px solid #C4BD97; 
      border-top: 1px solid #C4BD97; 
      border-bottom: 1px solid #C4BD97; 
     } 

     .navbar li ul li a:hover { 
      background-color: #660000; 
     } 
    </style>        
</head> 
<body> 
    <div id="wrap"> 
     <ul class="navbar"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Sample Issue</a></li> 
      <li><a href="http://gardenstatelegacy.com/Subscribe.html">Subscribe</a></li> 
      <li><a href="#">Resources</a> 
       <ul> 
        <li><a href="#">History Sites/Groups</a></li> 
        <li><a href="#">Speakers Bureau</a></li> 
        <li><a href="http://gardenstatelegacy.com/Professional_Directory.html">Consultant Directory</a></li> 
        <li><a href="#">Links</a></li> 
       </ul>   
      </li> 
      <li><a href="#">About GSL</a> 
       <ul> 
        <li><a href="#" >Mission Statement</a></li> 
        <li><a href="#">Who We Are</a></li> 
        <li><a href="#">News</a></li> 
       </ul>   
      </li> 
      <li><a href="#">GSL Store</a></li> 
      <li><a href="#">Advertise</a></li> 
     </ul> 
    </div> 
</body> 
</html>

來源

2013-04-02 Gordon

我沒有你的解決方案，但我確認它不IE10工作，但沒有工作在Firefox 19（包括在PC上）。

你可能想要檢查的一件事是文檔類型，因爲它被認爲會導致跨瀏覽器問題，當涉及到CSS。嘗試設置，看看是否有幫助。

抱歉，我不能更多的幫助。

來源

2013-04-02 01:49:29

謝謝戴夫。我會怎麼做？我認爲你的意思是頂部的<！DOCTYPE html>行？你能建議更換嗎？嘿，我警告過我是個新手！ :) – Gordon

其實你粘貼在你的問題的代碼絕對不是在頁面中顯示的代碼。 IE以怪癖模式呈現。 IE中的源文件根本沒有顯示文檔類型。 – Jeff

我應該添加下面的細節。我正在使用雅虎的SiteBuilder。下拉菜單是通過複製菜單的代碼並將其粘貼到html框架中創建的。我的問題中的代碼來自該HTML框架並定義菜單。菜單的代碼出現在下方。文檔類型在哪裏？謝謝！ – Gordon

我有一個類似的問題，我記得我搞砸了z-索引（增加值），並刪除「浮動：左」。

來源

2013-04-02 01:55:24 ptutt

感謝您的建議。如果我理解正確，z-index會告訴你什麼是元素。我不認爲這是因爲下拉部分在Firefox和Chrome中可見。我拿出「float：left」，它似乎只是把鏈接放在另一個上面，而不是沿着寬度。我認爲戴夫可能已經有了一些東西。這似乎是一個兼容性問題。 – Gordon

它是ie9中的一個怪癖，但是css編碼全都是關於處理怪癖（不幸的是）。 IE在行爲上有所不同（甚至在不同版本之間）。雖然，它似乎正在變得更好。 – ptutt

正確。 z-index控制在什麼元素前面顯示的元素。 Z指數越高，該元素將被帶到前面。我有一個類似的問題，但菜單列表不顯示在表格上。您也可以玩弄刪除「絕對」設置。抱歉是非特定的，但我現在無法訪問我的代碼。 – ptutt

CSS下拉菜單在IE9中不起作用

回答

相關問題