La meilleure façon de réparer CSS/JS déroulant dans IE7 lorsque la page comprend Google Map

Question

J'ai une page en utilisant <ul> listes pour la navigation (Javascript change le style à afficher ou pas au survol de la souris).

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

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

J'ai fait un peu de recherche et j'ai découvert que ceci pourrait être un exemple de bug IE Select Box, mais je ne suis pas sûr que la carte Google semble être en utilisant un <div>, pas un .

Est-ce que quelqu'un d'autre a rencontré un problème similaire à celui-ci, et si oui, ont-ils des recommandations sur la meilleure façon de surmonter ce problème?

Answer 1

Je ne sais pas si cela va résoudre votre problème mais vous pouvez essayer this solution at ccsplay.co.uk qui résout le problème des menus apparaissant sous des listes déroulantes. Je ne sais pas si ça marchera, mais ça vaut le coup.

Answer 2

Je n'ai pas une réponse immédiate pour vous, mais les outils mentionnés dans this answer (en particulier l'inspecteur IE DOM) peuvent aider.

Answer 3

Je fixe un problème similaire avec menus déroulants qui ne figurent pas sur les films flash dans IE6/IE7/IE8 à l'aide des 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 replacer les listes déroulantes vers le haut où elles appartiennent.

La raison pour laquelle cela fonctionne est parce que IE respecte plus la commande de source que le z-index. Cependant, il n'était toujours pas capable de s'afficher au-dessus d'un plug-in Windows Media Player.

Answer 4

Je crois que cela pourrait arriver à cause d'une chose Active-X IE 6+ utilise pour analyser CSS.

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

Je voudrais d'abord essayer de faire un menu sans Javascript, en utilisant du CSS pur et en incluant les hacks que j'ai mentionnés. Cela réglerait probablement votre problème. Vous n'avez pas besoin de Javascript pour changer de style au passage de la souris et ce genre de choses.

Si vous voulez vérifier ce que hacking CSS est sur le point: cliquez here

Si vous voulez vérifier quelques exemples de menu CSS pur: cliquez here

Hope this helps!

Answer 5

Selon this google maps thread, vous avez raison - un IFrame est inséré par le code google.

Vous aurez besoin d'utiliser la solution que Dan a mentionné,

vous pouvez essayer this solution at ccsplay.co.uk qui résout le problème des menus apparaissant sous les listes déroulantes

Vous pouvez également voir Internet Explorer HACK/Fix For Select Box Showing through DIV .

Fondamentalement, la solution est, en utilisant JavaScript, de placer votre menu CSS dans un IFrame dans IE6. Une autre solution consiste à utiliser JavaScript pour masquer la carte Google lorsque le menu CSS est supprimé, ou pour remplacer la carte Google avec une carte statique (peut-être même une carte statique Google) lorsque le menu CSS est abaissé.