IE7 survolez une div perdue lorsque vous touchez un élément enfant de cette div

Question

En théorie

J'ai un div (conteneur) qui apparaît au survol de l'un de ses divs enfants (menu déroulant). La liste déroulante contient des liens images, etc. et lorsque je la quitte, le conteneur et la liste déroulante disparaissent.

<div id="container">
  <div>Hover over me to see extra stuff</div>
  <div id="drop-down">
     <div>
       <img />
     </div>
     <div>
       <a />
       <p><span>Info</span><span>More</span></p>
     </div>
     <img />
  </div>
</div> 

Voici le jQuery

$('#container').hover(
  function(){ $(this).find('#drop-down').addClass('hover'); },
  function(){ $(this).find('#drop-down').removeClass('hover'); }
);

Voici le code CSS du survol

#container #drop-down {left: -9999px;}
#container .hover {left: 0;}

En pratique

Dans tous les navigateurs autres que IE7, cela fonctionne parfaitement, mais lorsque je mets en surbrillance les étendues du premier div contenant le menu déroulant, le menu déroulant disparaît pour une raison quelconque, comme si j'avais quitté le conteneur.

La question

Je me suis cogné la tête contre un mur pendant près de 3 heures pour essayer de trouver tous les ie7 bugs que je pouvais voir si ceux-ci étaient pertinents mais malheureusement sans succès. Au départ, je pensais que cela pourrait être un problème 'z-index', mais comme il est affiché au-dessus du contenu ci-dessous, cela ne peut pas être le cas (et je l'ai essayé en réglant 'position: relative; z-index: 9999;' sur les p et les étendues). Autre que cela, je suis complètement perplexe. Cependant, je sais que les éléments situés sous cette div (par exemple, la balise image dans l'exemple ci-dessus) créent le problème après avoir contourné les étendues de remplissage du p.

.

Précisions supplémentaires: J'ai trouvé que c'était de faire les éléments qui se trouvaient sous les travées, mais comme ils ne montrent pas à travers, je ne sais pas comment le réparer. De plus, le sous-élément importe peu, mais il y a un div sous lequel vous pouvez "entrer". (c’est-à-dire que vous n’y êtes pas déjà), vous perdez le survol et la liste

Je sais que je n'ai pas mis en place le CSS, mais est-ce que quelqu'un peut imaginer une raison quelconque pour que cela se produise? De plus, j’ai désactivé tous les CSS travaillant directement dessus et il est toujours affecté, mais ce problème.

Answer 1

Comme indiqué dans les commentaires

Mettre une couleur de fond sur la travée facilitera le survol. Pour une raison quelconque, lorsque vous survolez un arrière-plan transparent dans IE, il considère que la souris ne se trouve plus dans l'objet dom (ou dans ce cas, dans l'étendue), mais dans l'élément situé en dessous et appelle l'événement out de la souris.

Microsoft considère qu'il s'agit d'un bogue et de liens vers ce entrée de blog sur msdn entrée

Answer 2

Vous avez trouvé ce qui provoque la disparition d'éléments dans l'ancienne version d'IE. Copier ajouter ceci à votre css

div { display: inline-block; }

div { display: block; }

Ceci explique bien le bogue.

Answer 3

div { display: inline-block; }  div { display: block; } 

Cela a fonctionné pour moi ... wow quelle douleur.