下拉菜單在IE7

不顯示

我目前正在建設一個網站，它使用Projekktor發揮幾乎一切，即導航電影和JQuery，顯示面板等開發環節 - http://www.hundredframes.com/dev/home/下拉菜單在IE7

我已經讓這個網站運行在Firefox，Chrome，Safari和Opera上。但一如既往，IE瀏覽器讓我陷入困境。我使用IE矩陣過濾器來扭曲文本和Cufon來渲染字體。工作流程是 - 用戶點擊一個鏈接。如果它有一個子菜單，子菜單的第一項就會突出顯示，並顯示該鏈接的內容。

目前在IE7中，顯示了第一個子菜單鏈接的內容，但是子菜單的鏈接沒有顯示，因此用戶無法瀏覽任何其他子節。我還使用鏈接的背景圖像來避免與IE7中傾斜文本相關的別名問題。奇怪的是，當您點擊導演部分中的縮略圖時，會顯示列出導演的子菜單。

我認爲這與z-index堆棧順序有關，儘管我已經爲所有元素分配了z-index值。菜單代碼如下：

--------------- HTML ------------------

<ul id="menu" class="left"> 
    <li id="direct"> 
     <a href="#" id="direct-lnk" onClick="return false;" title="Directors">directors</a> 
     <ul class="list"> 
      <li id="vishal"><a href="#" id="vishal-lnk" onClick="return false;" title="Vishal Punjabi">vishal punjabi</a></li> 
      <li id="shiraz"><a href="#" id="shiraz-lnk" onClick="return false;" title="Shiraz Bhattacharya">shiraz bhattacharya</a></li> 
      <li id="roshan"><a href="#" id="roshan-lnk" onClick="return false;" title="Roshan Shetty">roshan shetty</a></li> 
      <li id="saurabh"><a href="#" id="saurabh-lnk" onClick="return false;" title="Saurabh Ghosh">saurabh ghosh</a></li> 
      <li id="mark"><a href="#" id="mark-lnk" onClick="return false;" title="Mark Toia">mark toia</a></li> 
      <li id="alejandro"><a href="#" id="alejandro-lnk" onClick="return false;" title="Alejandro Toledo">alejandro toledo</a></li> 
      <li id="claude"><a href="#" id="claude-lnk" onClick="return false;" title="Claude Genton">claude genton</a></li> 
      <li id="tim"><a href="#" id="tim-lnk" onClick="return false;" title="Tim Gibbs">tim gibbs</a></li> 
        </ul> 
       </li> 
    <li id="about"><a href="#" id="about-lnk" onClick="return false;" title="About us">about us</a></li> 
    <li id="production"> 
     <a href="#" id="production-lnk" onclick="return false;" title="Production services">production services</a> 
     <ul class="list"> 
      <li id="locations"><a href="#" id="locations-lnk" onClick="return false;" title="Locations">locations</a></li> 
      <li id="casting"><a href="#" id="casting-lnk" onClick="return false;" title="Casting">casting</a></li> 
      <li id="crews"><a href="#" id="crews-lnk" onClick="return false;" title="Crews">crews</a></li> 
      <li id="equipment"><a href="#" id="equipment-lnk" onClick="return false;" title="Equipment">equipment</a></li> 
      <li id="post-prod"><a href="#" id="post-prod-lnk" onClick="return false;" title="Post production">post production</a></li> 
     </ul> 
    </li> 
    <li id="get"><a href="#" id="get-lnk" onClick="return false;" title="Get in touch">get in touch</a></li> 
</ul>

下面是IE7

IE7 CSS

#menu{ 
    margin:0 auto; 
    list-style-type:none; 
    padding:103px 0 20px 0; 
    background:url(../img/layout/menu-line.gif) repeat-y 8px 0; 
    height:auto; 
    min-height:250px; 
    max-height:515px; 
    width:auto; 
    min-width:180px; 
    position:relative; 
    z-index:-1 !important; 
} 

#menu > li{ 
    margin-left:4px; list-style-type:none; 
    position:relative; 
    height:auto; min-height:25px; width:210px; 
    margin:10px 0; 
} 

#menu > li > a{ 
    display:block; 
    width:210px; 
    height:auto; 
    overflow:hidden; 
    background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px 0; 
    font:1.75em/1em "Carbon Block"; 
    letter-spacing:0.015em; 
    color:#46c5e1; 
    text-transform:uppercase; 
    padding-left:20px; 
    position:absolute; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-  0.21255656167002124, M22=1, SizingMethod='auto expand')"; 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand'); 
} 

#menu > li > a:hover{ 
    color:#ff9711; 
    background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px -35px; 
} 

#menu > li > a.sel{ 
    color:#ff9711; background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px -35px; 
} 

#menu > li > ul{ 
    display:none; 
    width:auto; 
    height:auto; 
    list-style-type:none; 
    margin:30px 0 10px 20px; 
    position:relative; 
    z-index:999; 
} 

#menu > li > ul > li{ 
    width:200px; 
    height:20px; 
    list-style-type:none; 
    position:relative; 
    padding-left:40px; 
    top:0; left:0; 
    z-index:990; 
} 

#menu > li > ul > li:hover{ 
    color:#ff9711; 
} 

#menu > li > ul > li > a{ 
    display:block; /*text-indent:-5000px;*/ 
    z-index:999; 
    position:absolute; top:0; left:0; 
    font:1.25em/1em "Carbon Block"; 
    letter-spacing:0.015em; color:#58585a;         
    background:url('../img/layout/anchor-bg.jpg'); 
    text-transform:uppercase; 
    height:20px; width:200px; z-index:999 !important; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand')"; 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand'); 
} 

#menu > li > ul > li > a:hover{ 
    color:#ff9711; 
} 

#menu > li > ul > li > a.sel{ 
    color:#ff9711; 
}

CSS的任何幫助，這將是巨大的，因爲我已經嘗試了所有的可能性，以獲得子菜單在IE7中顯示而且我沒有選擇。我可以退回到使用圖像並避免扭曲，Cufon等整體，但我不確定它是否會解決子菜單顯示問題，這將是我的最終選擇。

此外，我使用< meta http-equiv =「X-UA-Compatible」content =「IE = EmulateIE7」/ >爲了強制IE進入IE7模式，如果這有所作爲。

最佳，薩加爾

來源

2011-05-28 Sagar

我在IE工作的菜單。

您需要在菜單列表項目的CSS中添加zoom:1，否則佈局將全部失控。

來源

2011-06-14 09:06:45

下拉菜單在IE7

回答

相關問題