2012-08-07 92 views
1

我很難過這個。我試圖把位置:相對和各種Z指數無濟於事。 以下是我的簡單下拉菜單的代碼。 它在除IE以外的每個瀏覽器都能正常工作。下拉菜單不在IE中顯示(隱藏在內容後面)

html頁面:

<div id="nav"> 
<ul id="navul"> 
    <li id="rootHome"> 
    <ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style= 
    "height: 40px;" id="home" /></a> 
    </li> 
    <li id="rootProducts" onclick="showMenu(this)">Products 
    <ul id="Products"> 
     <li> 
     <p class="navLink" onclick="changePage('products-1.php')">Product 1</p> 
     </li> 
     <li> 
     <p class="navLink" onclick="changePage('products-2.php')">Product 2</p> 
     </li> 

     <li> 
     <p class="navLink" onclick="changePage('products-3.php')">Product 3</p> 
     </li> 
    </ul> 
    </li> 
    <li id="rootNews"> 
    <a href="#Link for news" class="navLink">News</a> 
    </li> 
    <li id="rootCompany" onclick="showMenu(this)">Company &acirc;&circ;&uml; 
    <ul id="Company"> 
     <li> 
     <p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p> 
     </li> 
     <li> 
     <p class="navLink" onclick="changePage('./company-contactUs.php')">Contact 
     Us</p> 
     </li> 
    </ul> 
    </li> 
</ul> 

CSS:(格式沒有在這裏工作的) http://pastebin.com/raw.php?i=CjyQhXCs

+0

什麼版本的ie? – albert 2012-08-07 01:15:15

+0

我已經使用ie9和兼容模式ie7和ie8。全部失敗。 – TStu 2012-08-07 01:27:29

回答

5

嘗試在 id=nav DIV使用 position: relativez-index: 100。 Z索引在層中工作。如果元素的父元素的z-索引爲0,並且該元素的z-索引爲100,則該元素仍將出現在具有z-索引爲1的父元素的兄弟元素的另一元素之後。


該問題是在#navul ul上使用filter的直接結果。在計算IE的某個地方,元素會自動隱藏任何溢出。爲了解決這個問題,將背景移動到它自己的元素上並且絕對放置它。

http://jsfiddle.net/uTBZN/30/

感謝:

How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

+0

謝謝@Greg,工作完美! – TStu 2012-08-07 12:38:11

0

就像@Stu,我對我的資產淨值UL過濾器(在我的情況,.navbar):

.navbar { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0); /* IE6-9 */ 
} 

Per @ Greg,只要我刪除了該過濾器,下拉菜單就停留在IE9頁面內容的頂部。謝謝,救了我的一天!