IE7 se desplaza cuando se pierde el div cuando toca un elemento hijo de ese div

Question

En teoría

Tengo un div (contenedor) que cuando se cierne sobre uno de sus divisores secundarios aparece (desplegable). El menú desplegable contiene imágenes de enlaces, etc. y cuando lo dejo y el contenedor, desaparece el menú desplegable.

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

Aquí está el jQuery

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

Aquí está el CSS para pasar el cursor

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

En la práctica

En todos los navegadores que no sean IE7 funciona perfectamente, pero cuando resalto sobre los espacios en el primer div que contiene el menú desplegable, el menú desplegable desaparece por alguna razón como si hubiera dejado el contenedor.

La pregunta

He estado golpeando mi cabeza contra la pared durante casi 3 horas tratando de encontrar todos los errores ie7 que pude ver si alguno era relevante, pero lamentablemente sin suerte. Originalmente pensé que podría ser un problema de 'índice z', pero como en realidad se muestra sobre el contenido a continuación, este no puede ser el caso (y lo he intentado configurando 'position: relative; z-index: 9999;' tanto en la p como en los tramos). Aparte de eso, estoy completamente perplejo. Sin embargo, sé que los elementos debajo de ese div (por ejemplo, la etiqueta de la imagen en el ejemplo anterior) crean el problema después de rodear los tramos en el relleno de la p.

Aclaración adicional: Descubrí que es para hacer los elementos que se encuentran debajo de los tramos, pero como no se muestran, no tengo idea de cómo solucionarlo. Además, no importa qué elemento esté debajo solo si hay un div debajo que puede '' ingresar '' (es decir, aún no estás en él), entonces pierdes el cursor y desaparece el menú desplegable.

Sé que no he colocado el CSS, pero ¿alguien puede pensar en alguna razón por la que esto podría estar sucediendo? Además, he desactivado todos los CSS que trabajan directamente en él y todavía se ve afectado, pero este problema.

Answer 1

Como se dijo en los comentarios

Poner un color de fondo en el lapso hará que el cursor funcione. Por alguna razón, cuando pasa el mouse sobre un fondo transparente en IE, considera que el mouse ya no está en el objeto dom (o en este caso, el span), sino en el elemento debajo de él y llama al evento de mouse out.

Microsoft considera que esto es un error y se vincula a esta entrada de blog de msdn entrada

Answer 2

He encontrado lo que hace que los elementos desaparezcan en la versión anterior de IE. Copia, agrega esto a tu CSS

div { display: inline-block; }

div { display: block; }

Esto explica muy bien el error.

Answer 3

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

Esto funcionó para mí ... wow, qué dolor.