IE7 CSS Z-Index problème en mode quirks

Question

J'ai essayé de comprendre cela depuis plus d'une journée maintenant, donc toute aide serait appréciée. J'ai un menu Suckerfish qui est composé de ul/li. J'essaie d'ajouter des indicateurs de défilement vers le bas à mon menu. Dans mon exemple, j'ai un indicateur bleu et vert qui sont juste placés dans le menu pour le moment. Ces indicateurs sont juste un autre LI à l'intérieur de l'UL mais avec un style différent. Je les ai positionnés absolument avec un haut fixe. Si vous regardez l'exemple en utilisant Firefox et survolez Blah Reports, vous pouvez voir les 2 indicateurs apparaître.

http://inthemind.com/test/test.html

Si vous l'ouvrez dans IE7 et survolez Blah rapports qu'ils ne se présentent pas. Mais si vous passez la souris sur l'un des sous-éléments (par exemple, Conformité) lorsque ce sous-menu se développe, les indicateurs deviennent visibles. Je ne peux pas comprendre ce qui change pour que les indicateurs apparaissent une fois qu'un sous-menu se développe.

Si quelqu'un pourrait me donner un indice ou un conseil quant à ce qui manque pour que cela fonctionne dans IE, je l'apprécierais vraiment.

Merci, Raul

ps) je dois utiliser le mode bizarreries

Mise à jour Je l'ai réduit au fait que IE résoudre wont les éléments positionnés absolus parce que la ul est caché et IE ne recule pas et recalcule les positions quand le ul devient visible. Si j'attends jusqu'à ce que le ul soit visible alors je ré-assigner la classe aux indicateurs pour réinitialiser le positionnement sur les éléments il semble les faire apparaître. Ce n'est pas idéal parce que maintenant mes indicateurs ne s'affichent pas avec le menu, mais apparaissent après coup.

D'autres conseils?

Answer 1

Eh bien, je pensais que ce pour ceux d'entre vous qui sont intéressés. Ce qui finit par arriver dans IE, c'est que si l'élément parent passe de display: none à afficher: block les éléments enfants positionnés en absolu ne sont jamais traités dans le moteur de mise en page afin qu'ils n'obtiennent jamais leurs offsets initiaux.Donc, ce que vous avez à faire est de définir le parent à afficher: block, réinitialiser la classe sur l'indicateur LI de sorte que le moteur de mise en page intervienne, puis vous devez forcer le moteur de mise en page à tout extraire en appelant offsetTop. Une fois que les éléments ont été positionnés, nous pouvons remettre le parent à afficher: none.

La raison pour laquelle le moteur de mise en page doit être actualisé est que IE fusionnera toutes les modifications de style jusqu'à ce que le javascript soit terminé, ce qui signifie que les décalages ne seront jamais recalculés.

Voici le code qui fixe la question:

if ($.browser.msie && $.browser.version <= 7) { 
    var il = $ul.data('indicatorLayedOut'); 
    if (il == null) { // We only have to do the layout once 
     var $ind = $ul.find('>.indicator'); 
     $ul.css('visibility', 'hidden').css('display', 'block'); 

     // Force IE to re-style the indicators. If we omit this then the layout engine 
     // will not update the position and cause the indicators to not show up 
     $ind.addClass("indicator"); 

     // We then have to iterate through 
     // and pull the offset so we can 
     // force a dom update 
     $ind.each(function() { 
      var oy = this.offsetTop, ox = this.offsetLeft; 
      //console.log("X: " + ox + ", Y: " + oy); 
     }); 
     $ul.css('display', 'none').css('visibility', 'visible'); 

     $ul.data('indicatorLayedOut', true); 
    } 
} 

Answer 2

Jetez un oeil à this cela a fonctionné pour moi tout à l'heure. Althought pas 100% sûr si son que ur recherche, peut être utile à quelqu'un

Answer 3

un couple de choses à garder à l'esprit:

tous vos éléments indexés z devraient être position: relative ou position: absolute ou bien IE 6 et 7 ne les traitera pas correctement.

également, IE 6 et 7 traitent z-index par rapport à ses éléments frères, et non à tous les éléments. ex =>

<div style="z-index: 2;"> 
    <div id="d1" style="z-index: 1000"></div> 
</div> 
<div style="z-index: 1;"> 
    <div id="d2" style="z-index: 2000"></div> 
</div> 

Dans cet exemple, # d1 apparaîtrait # d2.

Vous pouvez également ajuster l'ordre des éléments frères dans le DOM pour obtenir l'ordre z désiré.

si vous utilisez jQuery, voici une solution rapide potentiel =>
http://thepalmcivet.com/post/121898767/fixing-internet-explorers-z-index-bug-with-jquery