IE7 그 div의 자식 요소를 만질 때 손실되는 div에 대한 hover

Question

이론에 의하면

나는 자식 Divs 중 하나에 맴돌 때 (드롭 다운)에 나타나는 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'문제 일 수 있다고 생각했지만 실제로 아래의 내용 위에 표시되기 때문에 이것은 사실이 될 수 없습니다 (그리고 나는 '위치 : elative; z-index : 9999;'를 설정하여 그것을 시도했습니다. p와 스팬 모두에서). 그 외에는 완전히 혼란스러워합니다. 그러나 해당 DIV 아래의 모든 항목 (예 : 위의 예의 이미지 태그)이 p의 패딩에있는 스팬을 스커트 한 후 문제를 만듭니다.

추가 설명 : 나는 그것이 스팬 아래에있는 요소를 수행하는 것이지만, 그들이 보여주지 않기 때문에 나는 그것을 고치는 방법을 모른다. 또한, "입력"할 수있는 DIV가있는 경우 (즉, 아직 안에 있지 않음) 호버를 잃고 드롭 다운이 사라집니다.

나는 CSS를 세우지 않았지만 왜 이런 일이 일어날 수 있는지 생각할 수 있습니까? 또한 모든 CSS를 직접 작업했지만 여전히 영향을받지만이 문제는 여전히 영향을받습니다.

Answer 1

의견에서 말했듯이

스팬에 배경색을두면 호버가 작동합니다. IE의 투명한 배경 위로 마우스를 가져갈 때 마우스는 더 이상 DOM 객체 (또는이 경우, 범위)에 있지 않다고 생각하지만 그 아래 요소에서 마우스 아웃 이벤트를 호출합니다.

Microsoft는 이것을 버그로 간주하고 이에 대한 링크를 고려합니다 블로그 항목 거기에서 MSDN 기입

Answer 2

IE의 오래된 버전에서 요소가 사라지는 원인을 발견했습니다. 복사 CSS에 이것을 추가하십시오

div { display: inline-block; }

div { display: block; }

이것 버그를 멋지게 설명합니다.

Answer 3

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

이것은 나를 위해 효과가있었습니다 ... 와우 얼마나 고통.