Problema de capas con el acordeón jQuery y IE7

Question

Tengo un problema extraño con el complemento de acordeón jQuery y IE7 (y tal vez antes, no lo he probado allí). Estoy usando un tema personalizado de jQuery UI creado con ThemeRoller. Lo modifiqué un poco para ajustar colores, márgenes y bordes. El acordeón se encuentra dentro de un DIV que, a su vez, está anidado dentro de mi contenido principal. Marcado simplificado y CSS a continuación. Básicamente, el contenido es un cuadro centrado rodeado de bordes. El menú está desplazado debajo de la parte superior del cuadro y flota sobre el borde izquierdo.

El problema es que en IE7 una vez que pasé el mouse sobre el menú, los bordes del DIV main subyacente se muestran a través del acordeón. Esto no sucede en FF o Safari. La pregunta es por qué, ya que el acordeón predeterminado CSS establece un índice z de 1. ¿No deberían aparecer todos esos elementos sobre la parte superior de los elementos DOM detrás de ellos? ¿Y por qué solo al pasar el mouse?

Ya he resuelto este problema y publicaré la solución como respuesta.

<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

Después de intentar establecer explícitamente un índice z en las diferentes clases de acordeón .ui, decidí hacer una copia de seguridad de un nivel. Resulta que establecer un índice z (de 1) en el main-menu DIV resuelve el problema en IE7. Tenga en cuenta que el índice z en la clase principal .ui-accordion siempre estuvo ahí. La aplicación de la clase ui-acordeón al div main-menu rompe el diseño y pensé que era más fácil simplemente agregar el índice z al menú principal, en lugar de intentar cambiar el estilo. que funciona con la clase ui-acordeón aplicada.