Internet Explorer中的CSS懸停下拉菜單

試圖創建一個在Internet Explorer中看起來像在Firefox中一樣好的網站是一項難以置信的艱鉅任務。但是，IE中至少有一個錯誤對我們的團隊來說尤其令人困惑。 Firefox和Chrome中的下拉菜單顯示效果良好，但在資源管理器中看起來完全不起作用。Internet Explorer中的CSS懸停下拉菜單

此圖顯示了分別在Firefox和資源管理器中瀏覽時菜單的外觀。請點擊鏈接查看圖片。

http://i1025.photobucket.com/albums/y315/brycewwilson/firefox-explorerscreenshot.png

請幫幫忙！有沒有其他人遇到這個問題，而嘗試使用CSS格式的菜單？該菜單使用無序列表和列表項目，並使用CSS懸停來顯示子菜單內容。

在此先感謝！

更新：出於某種原因，該菜單在IE中獨立運行，但它仍然無法在我們的網站上運行。令人費解...

這是代碼。

的HTML如下：

<head> 
<link rel="stylesheet" type="text/css" href="old_hover_menu.css"/> 
</head> 
<body> 
<ul id="topDropDownMenu"> 
<li id="aboutDropDown"><a href="#">About</a> 
</li> 
<li id="contactDropDown"><a href="#">Contact</a> 
<ul> 
<li><a href="#">Form</a></li> 
<li><a href="#">Information</a></li> 
</ul> 
</li> 
</ul> 
</body>

這裏是CSS：

#topDropDownMenu {position:relative;background: no-repeat 100% 50%;width:50em;max-width:100%;float:left;} 

#topDropDownMenu li ul { 
    width:11em !important;/* leaves room for padding */ 
    cursor:default; 
    position:absolute; 
    height:auto; 
    display:none; 
    left:-10px; 
    padding:1px 10px 10px 10px; 
    background:url(/img/clear.gif); 
} 
/* All LIs */ 
#topDropDownMenu li { 
    position:relative; 
    width:8.3em; 
    max-width:16.5%; 
    cursor:pointer; 
    float:left; 
    list-style-type:none; 
    font-weight:bold; 
     border-style:solid; 
     border-width:1px; 
    border-color:#222; 
    text-align:center; 
     -moz-border-radius:8px 8px 0px 0px; 
} 
/* sub-menu LIs */ 
#topDropDownMenu li ul li { 
    width:8.3em/*FF*/; 
    padding:0; 
    border:none; 
    max-width:100%; 
    border:1px solid #333; 
    border-top:none; 
     -moz-border-radius:0px 0px 0px 0px; 
} 
/* All anchors */ 
#topDropDownMenu li a { 
    cursor:pointer !important; 
    color:#666; 
    text-decoration:none; 
    display:block; 
    float:left; 
    height:2em; 
    line-height:2em; 
    width:100%; 
     -moz-border-radius:8px 8px 0px 0px; 
} 
/* sub-menu Anchors */ 
#topDropDownMenu li ul li a { 
    width:8.3em/*FF*/; 
    position:relative !important; 
    cursor:pointer !important; 
    white-space:nowrap; 
    line-height:1.7em; 
    height:1.7em; 
    font-weight:normal; 
    color:#666; 
    background-position:0 50% !important; 
     -moz-border-radius:0px 0px 0px 0px; 
} 
/*hover*/ 
#topDropDownMenu li a:hover, 
#topDropDownMenu li a:focus, 
#topDropDownMenu li a:active {color:#000;background:#fff} 
/* display and z-index for the sub-menus */ 
#topDropDownMenu li:hover ul, 
#topDropDownMenu li.msieFix ul {display:block;z-index:10;top:2em !important;} 
#topDropDownMenu li#aboutDropDown {z-index:2;} 
#topDropDownMenu li#contactDropDown {z-index:1;} 

.aboutDropDown #topDropDownMenu li#aboutDropDown ul, 
.contactDropDown #topDropDownMenu li#contactDropDown ul { display:block;top:-1000px} 
#aboutDropDown a {background-color:#b9e075;} 
#contactDropDown a {background-color:#f7c472;} 

#topDropDownMenu li.msieFix a {} 

.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, 
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, 
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, 
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, 
{position:absolute !important;top:1028px !important;}

來源

2010-08-27 user432586

歡迎來到網頁開發，IE將很快成爲你生活的禍根。另外，如果我們能夠提供幫助，一些CSS和HTML將會很有幫助。 – Konrad 2010-08-27 16:54:48

請給我們提供一些我們可以調試的代碼。僅僅從截圖中我們可能無法幫助你。 – 2ndkauboy 2010-08-27 16:55:46

這才勉強算作一個答案，但它可能會有所幫助。

當您使用完全自定義的解決方案時，跨瀏覽器兼容性可能有點像這樣的事情的怪物。這是一個使用像jQuery UI這樣的庫的例子，它可以讓你更輕鬆，因爲它們通常都是跨瀏覽器兼容的。

如果這不是一個選項，在沒有看到您的代碼的情況下將無法提供幫助。你使用什麼版本的Internet Explorer？

來源

2010-08-27 16:55:54 jdc0589

沒有看到一些HTML和CSS，沒有辦法給你一個特定的解決方案。但是，有一些技術可以用來幫助緩解IE漏洞。

浮動您的<li> s，即使它們不是水平的。
將display: inline添加到現在漂浮的<li> s。
指定一個width到您的<li>或<a>標籤內。
可能將position: relative添加到<li> s。
將display: block添加到<li>中的<a>標籤。
將width: 100%或zoom: 1（或觸發hasLayout的其他任何內容）添加到頂層<ul>。

上面的一些技巧通常會讓你處於更好的位置。進一步的調整可能是必要的，但希望IE會表現得更好。

來源

2010-08-27 16:58:41 CalebD

謝謝！如果你們都不介意看看它的話，那麼這段代碼就要起來了。 – user432586 2010-08-30 14:26:33

也添加在一個DOCTYPE幫助修復[我與IE有問題]（http://stackoverflow.com/questions/8658186/ie-css-border-missing-when-using-displaynone） – icc97 2011-12-28 20:54:08

我喜歡自己編碼一切，但HTML/CSS/JS導航是其中一個你不需要重新發明輪子的領域之一。無論你想要什麼樣子，都有很多準備好去解決問題的方法，這些解決方案已經通過了瀏覽器的測試。 Suckerfish是一個純粹的html/css解決方案的流行之一，但還有很多工作將會很好，並且可以很容易地按照你想要的樣式進行設計。（只要確保樣式正確的元素）

來源

2010-08-27 17:52:03

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <style> 
     #topDropDownMenu { 
      position: relative; 
      background: no-repeat 100% 50%; 
      width: 50em; 
      max-width: 100%; 
      float: left; 
     } 

      #topDropDownMenu li ul { 
       width: 11em !important; /* leaves room for padding */ 
       cursor: default; 
       position: absolute; 
       height: auto; 
       display: none; 
       left: -10px; 
       padding: 1px 10px 10px 10px; 
       background: url(/img/clear.gif); 
      } 
      /* All LIs */ 

      #topDropDownMenu li { 
       position: relative; 
       width: 8.3em; 
       max-width: 16.5%; 
       cursor: pointer; 
       float: left; 
       list-style-type: none; 
       font-weight: bold; 
       border-style: solid; 
       border-width: 1px; 
       border-color: #222; 
       text-align: center; 
       -moz-border-radius: 8px 8px 0px 0px; 
      } 
       /* sub-menu LIs */ 

       #topDropDownMenu li ul li { 
        width: 8.3em /*FF*/; 
        padding: 0; 
        border: none; 
        max-width: 100%; 
        border: 1px solid #333; 
        border-top: none; 
        -moz-border-radius: 0px 0px 0px 0px; 
       } 
       /* All anchors */ 

       #topDropDownMenu li a { 
        cursor: pointer !important; 
        color: #666; 
        text-decoration: none; 
        display: block; 
        float: left; 
        height: 2em; 
        line-height: 2em; 
        width: 100%; 
        -moz-border-radius: 8px 8px 0px 0px; 
       } 
       /* sub-menu Anchors */ 

       #topDropDownMenu li ul li a { 
        width: 8.3em /*FF*/; 
        position: relative !important; 
        cursor: pointer !important; 
        white-space: nowrap; 
        line-height: 1.7em; 
        height: 1.7em; 
        font-weight: normal; 
        color: #666; 
        background-position: 0 50% !important; 
        -moz-border-radius: 0px 0px 0px 0px; 
       } 
       /*hover*/ 

       #topDropDownMenu li a:hover, #topDropDownMenu li a:focus, #topDropDownMenu li a:active { 
        color: #000; 
        background: #fff; 
       } 
       /* display and z-index for the sub-menus */ 

       #topDropDownMenu li:hover ul, #topDropDownMenu li.msieFix ul { 
        display: block; 
        z-index: 10; 
        top: 2em !important; 
       } 

       #topDropDownMenu li#aboutDropDown { 
        z-index: 2; 
       } 

       #topDropDownMenu li#contactDropDown { 
        z-index: 1; 
       } 

     .aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul { 
      display: block; 
      top: -1000px; 
     } 

     #aboutDropDown a { 
      background-color: #b9e075; 
     } 

     #contactDropDown a { 
      background-color: #f7c472; 
     } 

     #topDropDownMenu li.msieFix a { 
     } 

     .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, { 
      position: absolute !important; 
      top: 1028px !important; 
     } 
    </style> 
    <link rel="stylesheet" type="text/css" href="old_hover_menu.css" /> 
</head> 
<body> 
    <ul id="topDropDownMenu"> 
     <li id="aboutDropDown"><a href="#">About</a></li> 
     <li id="contactDropDown"><a href="#">Contact</a><ul> 
      <li><a href="#">Form</a></li> 
      <li><a href="#">Information</a></li> 
     </ul> 
     </li> 
    </ul> 
</body> 
</body></html>

來源

2013-10-15 06:43:16 doowan

嗨doowan，你可能會考慮改進你的答案的格式。你可以在[沙箱]（http://meta.stackexchange.com/questions/3122/formatting-sandbox?lq=1） – bummi 2013-10-15 06:56:30

測試格式不知道爲什麼它顯示爲這樣.. – doowan 2013-10-15 07:02:08

固定他/她的菜單雖然 – doowan 2013-10-15 07:02:29

Internet Explorer中的CSS懸停下拉菜單

回答

相關問題