J'ai un problème étrange avec le plugin accordéon jQuery et IE7 (et peut-être plus tôt, n'ont pas testé là-bas). J'utilise un thème d'interface utilisateur jQuery personnalisé construit avec ThemeRoller. Je l'ai ajusté pour ajuster les couleurs, les marges et les bordures. L'accordéon est situé à l'intérieur d'un DIV qui est, à son tour, imbriqué dans mon contenu principal. Marquage 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 sur le bord gauche.Problème de superposition avec jQuery accordéon et IE7
Le problème est que dans IE7 une fois que j'ai survolé le menu, les frontières du sous-jacent main DIV montrent à travers 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 apparaître 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 publiera 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;
}