IE (7,8-tryb komp.) i menu drop-down

Ostatnio natknąłem się na dwa problemy związane z rozwijanym menu na stronie. Z jakiegoś powodu nie działało ono poprawnie pod Internet Explorerem 8 uruchomionym w trybie kompatybilności wstecznej (podobnie rzecz się miała w przypadku IE7). Menu było dość standardowe:

<ul>
<li><a href="adres1">tekst1</a></li>
<li><a href="adres2">tekst2</a>
<div class="sub">blabla</div></li>
</ul>

Po najechaniu myszką na rozwijany element nie było widać podrzędnego diva „sub”. W tym przypadku wystarczyło poprawić css związany z elementem li:

div.sub {
 position: absolute ;
}

li {
/* ... */
position: relative ; /* brakująca linijka */
}

Drugi problem objawił się jak tylko submenu zaczęło się pokazywać. Div wyglądał tak, jakby brakowało w nim tła, elementy umieszczone na stronie poniżej przebijały przez niego i wyłapywały zdarzenia myszki (co powodowało, że menu się chowało). Przyczyną okazało się miejsce umieszczenia menu w kodzie:

<div id="top">
<ul id="menu">...</ul>
</div>
<div id="content">
....
</div>

Przy takiej konfiguracji kompatybilne IE wstawiało menu „pod” #content. Po zmianie kodu na:

<div id="top">
</div>
<div id="content">
<ul id="menu">...</ul>
....
</div>

wszystko wróciło do normy.

Być może jest jakieś lepsze rozwiązanie, ale szukanie go przy pomocy narzędzi dewelopera dołączonych do IE nie należy do najprzyjemniejszych.

• Tweet
• Pin It