Meilleur moyen de corriger la liste déroulante CSS/JS dans IE7 lorsque la page inclut Google Map

Question

J'ai une page utilisant <ul> listes pour la navigation (Javascript modifie le style pour s'afficher ou non au survol de la souris).

Cela fonctionne bien pour moi sauf dans IE6 et IE7 lorsque j'ai une Google Map sur la page.

Dans ce cas, la liste déroulante ne fonctionne tout simplement pas.Cependant, la page continue de fonctionner dans FireFox 2.

J'ai fait quelques recherches et découvert que cela pourrait être un exemple du bug de la boîte de sélection IE, mais je ne suis pas sûr car Google Map semble utiliser un <div>, pas un <iframe>.

Quelqu'un d'autre a-t-il rencontré un problème similaire à celui-ci et si oui, a-t-il des recommandations sur la meilleure façon de résoudre ce problème ?

Answer 1

Je ne sais pas si cela résoudra votre problème mais vous voudrez peut-être essayer cette solution sur ccsplay.co.uk ce qui résout le problème des menus apparaissant sous les listes déroulantes.Je ne sais pas si cela fonctionnera avec certitude, mais ça vaut le coup.

Answer 2

J'ai résolu un problème similaire avec les listes déroulantes n'apparaissant pas sur les animations Flash dans IE6/IE7/IE8 en utilisant ceci jQuery:

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

Où primary-nav est le ID de l'élément conteneur déroulant et footer est le ID du dernier élément de la page.J'ai ensuite utilisé le positionnement absolu pour déplacer les listes déroulantes vers le haut, à leur place.

La raison pour laquelle cela fonctionne est que IE respecte davantage l'ordre des sources que le z-index.Cependant, il n'était toujours pas en mesure de s'afficher par-dessus un plugin Windows Media Player.

Answer 3

Je pense que cela pourrait se produire à cause d'un truc Active-X que IE 6+ utilise pour analyser CSS.

Au fil du temps, j'ai dû adapter mon travail pour inclure quelques hacks IE sur mon CSS afin qu'il soit compatible avec plusieurs navigateurs.

J'essaierais d'abord de créer un menu sans Javascript, en utilisant du CSS pur et en incluant les hacks que j'ai mentionnés.Cela résoudrait probablement votre problème.Vous n'avez pas réellement besoin de Javascript pour modifier les styles au survol de la souris et ce genre de choses.

Si vous voulez découvrir en quoi consiste le piratage CSS :Cliquez sur ici

Si vous souhaitez consulter quelques exemples de menus CSS purs :Cliquez sur ici

J'espère que cela t'aides!

Answer 4

Selon ce fil de discussion sur Google Maps, vous avez raison - un IFrame est inséré par le code Google.

Vous devrez utiliser la solution mentionnée par Dan,

tu voudras peut-être essayer cette solution sur ccsplay.co.uk qui résout le problème des menus apparaissant sous les listes déroulantes

Alternativement, voir Internet Explorer HACK/Fix pour la zone de sélection affichée via DIV.

Fondamentalement, la solution consiste, en utilisant JavaScript, à placer votre menu CSS dans un IFrame dans IE6.

Une solution alternative consiste à utiliser JavaScript pour masquer la carte Google Map lorsque le menu CSS est déroulé, ou à remplacer la carte Google Map par une carte statique (peut-être même une carte statique Google) lorsque le menu CSS est déroulé.

Answer 5

Je n'ai pas de réponse immédiate à vous donner, mais les outils mentionnés dans cette réponse (en particulier l'inspecteur IE DOM) peut aider.