IE7 зависает на div теряется при прикосновении к дочернему элементу этого div

Question

В теории

У меня есть div (контейнер), который при наведении на один из его дочерних элементов div (выпадающий). Раскрывающийся список содержит изображения ссылок и т. Д., А когда я покидаю его и контейнер, раскрывающийся список исчезает.

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

Вот jQuery

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

Вот CSS для наведения

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

На практике

В любом браузере, кроме IE7, он работает отлично, но когда я выделяю пролеты в первом, содержащем div в раскрывающемся списке, то выпадающий список почему-то исчезает, как если бы я покинул контейнер.

Вопрос

Я почти 3 часа бьюсь головой о стену, пытаясь найти все ошибки в ie7, какие только смогу увидеть, были ли они уместны, но, к сожалению, безуспешно. Первоначально я думал, что это может быть проблема с z-index, но, поскольку он фактически отображается над содержимым ниже, это не может иметь место (и я попробовал это, установив 'position: относительный; z-index: 9999;' как на р, так и на пролетах). Кроме этого я полностью в тупике. Однако я знаю, что любые элементы ниже этого div (например, тег image в приведенном выше примере) действительно создают проблему после обхода промежутков на отступе p.

Дополнительные разъяснения: Я обнаружил, что элементы должны лежать под пролетами, но поскольку они не просвечивают, я понятия не имею, как это исправить. Кроме того, не имеет значения, под каким элементом находится элемент, только если под ним находится элемент div, в который можно ввести "quot;" (то есть вы еще не в нем), тогда вы теряете зависание и выпадающий список исчезает.

Я знаю, что я не включил CSS, но может кто-нибудь придумать причину, по которой это может происходить? Кроме того, я отключил все CSS, работающие непосредственно с ним, и это все еще затрагивается, но эта проблема.

Answer 1

Как сказано в комментариях

Поместив цвет фона на диапазон, вы наведите курсор мыши. По какой-то причине, когда вы наводите курсор мыши на прозрачный фон в IE, он считает, что мышь больше не находится в объекте dom (или в данном случае в span), а вместо этого находится в элементе под ним и вызывает событие mouse out.

Microsoft считает это ошибкой и ссылается на эту запись в блоге из есть msdn запись

Answer 2

Нашли, что вызывает исчезновение элементов в старой версии IE. Скопируйте и добавьте это в свой CSS

div { display: inline-block; }

div { display: block; }

Это хорошо объясняет ошибку.

Answer 3

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

Это сработало для меня ... вау какая боль.