Problème de superposition avec l'accordéon jQuery et IE7

Question

J'ai un problème étrange avec le plugin jQuery accordéon et IE7 (et peut-être plus tôt, je n’ai pas testé là-bas). J'utilise un thème d'interface utilisateur jQuery personnalisé construit avec ThemeRoller. Je l'ai modifié pour ajuster les couleurs, les marges et les bordures. L'accordéon est situé dans une DIV qui, à son tour, est imbriquée dans mon contenu principal. Balisage simplifié et CSS est ci-dessous. Fondamentalement, le contenu est une boîte centrée entourée de bordures. Le menu est décalé sous le haut de la boîte et flotte au-dessus du bord gauche.

Le problème, c’est que dans IE7, une fois que j’avais survolé du menu, les bordures du DIV principal sous-jacent se diffusaient à l’aide de l’accordéon. Cela ne se produit pas dans FF ou Safari. La question est pourquoi, puisque l'accordéon par défaut CSS définit un z-index de 1? Tous ces éléments ne devraient-ils pas s'afficher au-dessus des éléments DOM derrière eux? Et pourquoi seulement en vol stationnaire?

J'ai déjà résolu ce problème et publierai la solution en guise de réponse.

<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

Après avoir essayé de définir explicitement un z-index sur les différentes classes .ui-accordéon, j'ai décidé de sauvegarder un niveau. Il s'avère que définir un z-index (sur 1) sur la div du main-menu résout le problème dans IE7. Notez que le z-index sur la classe principale .ui-accordéon était toujours là. L'application de la classe ui-accordéon au div main-menu casse la mise en page et j'ai pensé qu'il était plus facile d'ajouter simplement l'index z au menu principal, plutôt que d'essayer de la reformuler de manière qui fonctionne avec la classe ui-accordéon appliquée.