Problema di stratificazione con la fisarmonica jQuery e IE7

Question

Ho uno strano problema con il plugin per fisarmonica jQuery e IE7 (e forse prima, non ho ancora testato lì). Sto usando un tema dell'interfaccia utente jQuery personalizzato creato con ThemeRoller. L'ho modificato un po 'per regolare colori, margini e bordi. La fisarmonica si trova all'interno di un DIV che a sua volta è annidato all'interno del mio contenuto principale. Markup semplificato e CSS è sotto. Fondamentalmente il contenuto è una casella centrata circondata da bordi. Il menu è sfalsato sotto la parte superiore del riquadro e galleggia sul bordo sinistro.

Il problema è che in IE7 una volta ho passato con il mouse sopra il menu, i bordi del DIV main sottostante vengono visualizzati attraverso la fisarmonica. Questo non succede in FF o Safari. La domanda è perché, poiché la fisarmonica di default CSS imposta un indice z di 1? Tutti questi elementi non dovrebbero essere visualizzati sopra gli elementi DOM dietro di loro? E perché solo al passaggio del mouse?

Ho già risolto questo problema e pubblicherò la soluzione come risposta.

<div id="main" style="position: relative;">
    <div id="main-menu">
        <ul id="navigation" class="ui-accordion">
            <li>
                <div class="ui-accordion-header">
                </div>
                <div class="ui-accordion-content">
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

#main
{
    clear: both;
    padding: 30px 30px 30px 30px;
    background-color: #fff;
    border: solid 1px #669933;
    margin-bottom: 30px;
    min-height: 500px;
    height: auto !important;
    height: 500px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#main-menu
{
    position: absolute;
    top: 1em;
    left: -1em;
}

#navigation
{
    width: 10em;
}

/*UI accordion*/
.ui-accordion {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.5; text-decoration: none; font-size: 100%; list-style: none;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
/* additions from default */
    background-color: #ffffff;
    color: #333333;
    border: solid 1px #336600;
    text-indent: 0.2em;
    z-index: 1;
}

Answer 1

Dopo aver tentato di impostare esplicitamente un indice z sulle varie classi di fisarmonica .ui, ho deciso di eseguire il backup di un livello. Si scopre che l'impostazione di un indice z (di 1) nel menu principale DIV risolve il problema in IE7. Si noti che l'indice z sulla classe principale .ui-fisarmonica era sempre presente. Applicando la classe ui-fisarmonica al div menu principale si rompe il layout e ho pensato che fosse più semplice aggiungere anche l'indice z al menu principale, piuttosto che provare a ridisegnarlo così che funziona con la classe di fisarmonica applicata.