Обновление IE 9 убило эти выпадающие меню - PullRequest
Новая
       0

Обновление IE 9 убило эти выпадающие меню

0 голосов
/ 17 мая 2011

Любой другой браузер отображает эти свитки в разделе «О программе» и «Хорошо», но 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.

Спасибо за любой совет!

1 Ответ

0 голосов
/ 18 мая 2011

Проблема заключалась в элементе уровня блока (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 была назначена позиция: относительная, и я скорректировал положение выкатов.

...