IE 9更新已殺死這些下拉菜單

每個其他瀏覽器都會在About和Resources下顯示這些卷展欄，但IE 9不會顯示它們。IE 9更新已殺死這些下拉菜單

http://www.preemiestoday.com/pages/about_contact.php

我的CSS是這樣的：

#aboutRollout { 
    position:absolute; 
    left:inherit; 
    top:193px; 
    width:200px; 
    height:170px; // added today trying to fix this 
    z-index:5; 
    background-color:#CAD5EC; 
    color:#000; 
    border:1px solid #fff; 
    padding-top:5px; 
    z-index:100; 
} 
#aboutRollout LI { 
    border:none; 
    padding: 0 5px 5px 5px; 
    font-size:11px; 
    white-space:nowrap; 
    clear:both; 
} 

#aboutRollout LI A { 
    background-color:#CAD5EC; 
    color:#000; 
    text-decoration:none; 
} 

#aboutRollout LI A:HOVER { 
    background-color:#CAD5EC; 
    color:#000; 
    text-decoration:underline; 
}

的HTML看起來像這樣：

<li id='link1'><a href='/pages/about.php' onmouseover='showabout()' onmouseout='hideabout()'>About Us<div id="aboutRollout" style="display:none" onmouseover="showabout()" onmouseout="hideabout()"> 
<ul> 
<li><a href="pages/about.php">Mission</a></li> 
<li><a href="/pages/about_board.php">Board Members and Staff</a></li> 
<li><a href="/pages/about_donate.php">Donate</a></li> 
<li><a href="/pages/about_partners.php">Partners</a></li> 
<li><a href="/pages/about_contact.php">Contact</a></li> 
</ul></div></a></li>

而且JS是這樣的：

function showabout() { 
document.getElementById('aboutRollout').style.display='block'; 
} 
function hideabout() { 
document.getElementById('aboutRollout').style.display='none'; 
}

燦任何人看看爲什麼IE9顯示一個空框，只有當我定義高度？

檢入IE8，IE9，Chrome，FF和Windows Safari。

感謝您的任何建議！

來源

2011-05-17 jerrygarciuh

可能不相關，但你似乎已經在'＃aboutRollout' CSS中定義了兩次'z-index'。 – drudge 2011-05-17 17:55:19

謝謝。現在更正。緊握着稻草，補充說，沒有注意到原來的聲明。 – jerrygarciuh 2011-05-17 18:05:12

@jerry：抓着吸管？ :) – drudge 2011-05-17 18:09:38

問題是內聯元素（錨點）中的塊級元素（div）。

所以DIV替換爲一個LI：

<li id='link1' onmouseover='showabout()' onmouseout='hideabout()'><a href='/pages/about.php'>About Us</a><li id="aboutRollout" style="display:none" onmouseover="showabout()" onmouseout="hideabout()"> 
<ul> 
<li><a href="/pages/about.php">Mission</a></li> 
<li><a href="/pages/about_board.php">Board Members and Staff</a></li> 
<li><a href="/pages/about_donate.php">Donate</a></li> 
<li><a href="/pages/about_partners.php">Partners</a></li> 
<li><a href="/pages/about_contact.php">Contact</a></li> 
</ul></li>

和外UL被分配的位置是：相對於和我調整了的推出的位置。

來源

2011-05-17 20:32:25 jerrygarciuh

IE 9更新已殺死這些下拉菜單

回答

相關問題