IE7 passa con il mouse su div perdendo quando tocchi un elemento figlio di quel div

Question

In teoria

Ho un div (contenitore) che quando passa sopra una delle sue div secondarie appare (menu a discesa). Il menu a discesa contiene immagini link ecc. E quando lo lascio e il contenitore scompare il menu a discesa.

<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> 

Ecco il jQuery

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

Ecco il CSS per il passaggio del mouse

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

In pratica

In tutti i browser diversi da IE7 funziona perfettamente, ma quando evidenzio gli span nel primo div contenente in menu a discesa, il menu a discesa scompare per qualche motivo come se avessi lasciato il contenitore.

La domanda

Ho sbattuto la testa contro un muro per quasi 3 ore cercando di trovare tutti i bug ie7 che potevo vedere se ce n'erano rilevanti ma purtroppo senza fortuna. Inizialmente pensavo che potesse essere un problema di "z-index" ma dato che in realtà viene visualizzato sopra il contenuto sotto questo non può essere il caso (e l'ho provato impostando 'position: relative; z-index: 9999;' su entrambi p e span). A parte questo, sono completamente perplesso. So comunque che tutti gli elementi sottostanti quel div (ad esempio il tag immagine nell'esempio sopra) creano il problema dopo aver costeggiato gli span sull'imbottitura del p.

Ulteriori chiarimenti: Ho scoperto che consiste nel fare gli elementi che giacciono sotto le campate, ma dato che non vengono mostrati non ho idea di come risolverlo. Inoltre, non importa quale sia l'elemento sottostante solo se c'è un div al di sotto del quale puoi " inserire " (ovvero non ci sei già dentro) quindi perdi il passaggio del mouse e il menu a discesa scompare.

So di non aver creato il CSS, ma qualcuno può pensare a qualche motivo per cui ciò potrebbe accadere? Inoltre, ho disabilitato tutti i CSS che lavorano direttamente su di esso e questo è ancora interessato ma questo problema.

Answer 1

Come detto nei commenti

Mettere un colore di sfondo sull'intervallo farà funzionare l'hover. Per qualche motivo quando passi con il mouse su uno sfondo trasparente in IE, considera il mouse non più nell'oggetto dom (o in questo caso, l'intervallo), ma invece nell'elemento sottostante e chiama l'evento mouse out.

Microsoft considera questo un bug e collega a questo voce di blog da c'è msdn entry

Answer 2

Ho trovato ciò che sta causando la scomparsa degli elementi nella vecchia versione di IE. Copia aggiungi questo al tuo css

div { display: inline-block; }

div { display: block; }

Questo spiega bene il bug.

Answer 3

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

Questo ha funzionato per me ... wow che dolore.