IE7 pairar sobre div sendo perdido quando você toca um elemento filho desse div

Question

Em Teoria

Eu tenho um div (container) que, quando pairava sobre uma de suas crianças divs aparecem (drop-down). Drop-down contém links imagens etc, e quando eu deixá-lo e recipiente, em seguida, suspensa desaparece.

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

Aqui está o jQuery

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

Aqui está o CSS para pairar

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

Na prática

Em cada navegador diferente do IE7 ele funciona perfeitamente, mas quando eu destacar ao longo dos vãos na div primeira contendo no drop-down, em seguida, suspensa dissappears por algum motivo como se eu tivesse recipiente esquerdo.

A Pergunta

Eu tenho sido batendo minha cabeça contra a parede por quase 3 horas tentando encontrar todos os bugs IE7 que podia para ver se qualquer foram relevantes, mas infelizmente sem sorte. Inicialmente eu pensei que poderia ser 'z-index' problema, mas como ele é, na verdade, exibindo acima do conteúdo abaixo deste não pode ser o caso (e eu tentei por definição 'position: relative; z-index: 9999;' em ambos os p e os vãos). Outros, que eu estou completamente perplexo. No entanto eu sei que os todos os itens abaixo que div (por exemplo, a tag de imagem no exemplo acima) criam a questão depois contornando volta dos vãos sobre o preenchimento da p.

Além disso esclarecimento: Descobri que é fazer os elementos da deitado debaixo dos vãos, mas como eles não estão mostrando através Eu não tenho nenhuma idéia de como corrigi-lo. Além disso, não importa qual elemento está embaixo apenas se houver um baixo div que você pode "entrar" (ou seja, você ainda não estiver nele), então você perde o foco e drop-down desaparece.

Eu sei que eu não colocar o CSS, mas alguém pode pensar em qualquer razão para que isso poderia estar acontecendo? Além disso, eu ter desativado todos CSS trabalhando diretamente sobre ele e ele ainda é afetado, mas esta questão.

Answer 1

Como disse nos comentários

Colocar uma cor do fundo no período fará o trabalho hover. Por alguma razão quando você passa o mouse sobre um fundo transparente no IE, considera o mouse para não ser no objeto dom (ou neste caso, o span) mais, mas em vez disso, o elemento abaixo dele e chama o mouse para fora do evento.

Microsoft considera isto um bug e links para este entrada de blog a partir há MSDN entrada

Answer 2

descobriram o que está causando elementos a desaparecer na versão antiga do IE. Cópia adicione isso ao seu css

div { display: inline-block; }

div { display: block; }

Este explica o bug bem.

Answer 3

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

Isso funcionou para mim ... wow que uma dor.