Лучший способ исправить выпадающий список CSS / JS в IE7, когда страница содержит Google Map

Question

У меня есть страница, использующая списки <ul> для навигации (Javascript изменяет стиль, чтобы отображать его или нет при наведении курсора).

Это нормально работает для меня , за исключением в IE6 и IE7, когда у меня есть карта Google на странице.

В этом случае выпадающий список просто не работает. Тем не менее, страница продолжает работать в FireFox 2.

Я провел небольшое исследование и обнаружил, что это может быть примером ошибки IE Select Box, но я не уверен, поскольку карта Google использует <div>, а не <iframe>.

Кто-нибудь еще сталкивался с проблемой, подобной этой, и если да, то есть ли у него какие-либо рекомендации по наилучшему способу преодоления этой проблемы?

Answer 1

Согласно этой ветке Google Maps , вы правы - в код Google вставлен IFrame.

Вам нужно будет использовать решение, упомянутое Даном,

вы можете попробовать это решение по адресу ccsplay.co.uk , которое устраняет проблему появления меню в раскрывающихся списках

В качестве альтернативы см. Взлом Internet Explorer / Исправление для поля выбора, отображаемого через DIV .

В основном решение заключается в использовании JavaScript для помещения меню css в IFrame в IE6.

Альтернативное решение - использовать JavaScript, чтобы скрыть карту Google, когда меню CSS закрыто, или заменить карту Google статической картой (может быть, даже статическую карту Google), когда меню CSS раскрыто. 1019 *

Answer 2

Я полагаю, что это может произойти из-за Active-X, который IE 6+ использует для анализа CSS.

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

Сначала я попытался бы создать меню без Javascript, используя чистый CSS и включая упомянутые мной хаки. Это, вероятно, решит вашу проблему. Вам на самом деле не нужен Javascript для изменения стилей при наведении курсора и тому подобное.

Если вы хотите узнать, что такое CSS-хакерство: нажмите здесь

Если вы хотите посмотреть примеры CSS-меню: нажмите здесь

Надеюсь, это поможет!

Answer 3

Я не знаю, решит ли это вашу проблему, но вы можете попробовать это решение на ccsplay.co.uk , которое решает проблему меню, появляющегося под выпадающими списками. Я не знаю, сработает ли это наверняка, но стоит попробовать.

Answer 4

Я исправил аналогичную проблему с выпадающими списками, которые не появлялись во флэш-фильмах в IE6 / IE7 / IE8, с использованием этого jQuery :

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

Где primary-nav - это ID раскрывающегося элемента контейнера, а footer - это ID последнего элемента на странице. Затем я использовал абсолютное позиционирование, чтобы переместить выпадающие списки обратно на вершину, к которой они принадлежат.

Причина, по которой это работает, заключается в том, что IE уважает порядок источников больше, чем z-index. Однако он все еще не мог отображаться поверх плагина Windows Media Player.

Answer 5

У меня нет немедленного ответа для вас, но инструменты, упомянутые в этот ответ (особенно инспектор IE DOM), могут помочь.