Question

其他浏览器在“关于”和“资源”下显示这些卷展栏，但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中检查。

感谢您的任何建议！

Answer 1

问题是内联元素（锚点）中的块级元素（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被指定位置：相对，我调整了推出的位置。

IE 9更新已杀死这些下拉菜单

1 个答案: