페이지에 Google 지도가 포함된 경우 IE7에서 CSS/JS 드롭다운을 수정하는 가장 좋은 방법

문제

내가 사용하는 페이지가 있습니다 <ul> 탐색 목록(Javascript는 마우스 오버 시 표시 여부를 표시하도록 스타일을 변경함)

이것은 나에게 잘 작동합니다 제외하고 IE6 및 IE7에서 페이지에 Google 지도가 있을 때.

이 경우 드롭다운이 작동하지 않습니다.그러나 페이지는 FireFox 2에서 계속 작동합니다.

저는 약간의 조사를 했고 이것이 IE 선택 상자 버그의 예일 수 있다는 것을 발견했습니다. 그러나 Google 지도가 <div>, 아니 <iframe>.

이와 유사한 문제를 겪은 사람이 있습니까? 그렇다면 이 문제를 극복할 수 있는 최선의 방법에 대한 권장 사항이 있습니까?

해결책

이것이 문제를 해결해줄지는 모르겠지만 시도해 볼 수도 있습니다. ccsplay.co.uk의 이 솔루션 이는 드롭다운 목록 아래에 나타나는 메뉴 문제를 해결합니다.확실히 효과가 있을지는 모르겠지만 시도해 볼 가치가 있습니다.

다른 팁

다음을 사용하여 IE6/IE7/IE8의 플래시 동영상 위에 드롭다운이 나타나지 않는 유사한 문제를 해결했습니다. jQuery:

$(function () {
  $("#primary-nav").appendTo("#footer");
});

어디 primary-nav 은 ID 드롭다운 컨테이너 요소의 footer 은 ID 페이지의 마지막 요소.그런 다음 절대 위치 지정을 사용하여 드롭다운을 다시 원래 위치로 재배치했습니다.

이것이 작동하는 이유는 IE가 소스 순서보다 소스 순서를 더 존중하기 때문입니다. z-index.하지만 여전히 Windows Media Player 플러그인 위에 표시할 수는 없었습니다.

나는 IE 6+가 CSS를 구문 분석하는 데 사용하는 Active-X 때문에 그런 일이 발생할 수 있다고 생각합니다.

시간이 지나면서 CSS가 여러 브라우저와 호환될 수 있도록 일부 IE 해킹을 CSS에 포함하도록 작업을 조정해야 했습니다.

먼저 Javascript 없이 순수한 CSS를 사용하고 제가 언급한 해킹 기능을 포함하여 메뉴를 만들어 보겠습니다.문제가 해결될 가능성이 높습니다.마우스 오버 등의 스타일을 변경하기 위해 실제로 Javascript가 필요하지 않습니다.

CSS 해킹이 무엇인지 확인하고 싶다면:딸깍 하는 소리 여기

순수한 CSS 메뉴 예제를 확인하려면 다음을 수행하세요.딸깍 하는 소리 여기

도움이 되었기를 바랍니다!

에 따르면 이 구글 지도 스레드, 맞습니다. IFrame은 Google 코드에 의해 삽입됩니다.

Dan이 언급한 솔루션을 사용해야 합니다.

당신은 시도하고 싶을 수도 있습니다 ccsplay.co.uk의 이 솔루션 드롭다운 목록 아래에 나타나는 메뉴 문제를 해결합니다.

기본적으로 해결책은 JavaScript를 사용하여 CSS 메뉴를 IE6의 IFrame에 배치하는 것입니다.

대안적인 해결책은 JavaScript를 사용하여 CSS 메뉴를 풀다운할 때 Google 지도를 숨기거나 CSS 메뉴를 풀다운할 때 Google 지도를 정적 지도(아마도 Google 정적 지도일 수도 있음)로 바꾸는 것입니다.

즉각적인 답변을 드릴 수는 없지만 여기에 언급된 도구는 이 답변 (특히 IE DOM Inspector)가 도움이 될 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow