La mejor manera de arreglar el menú desplegable CSS/JS en IE7 cuando la página incluye Google Map

Question

tengo una pagina usando <ul> listas para navegación (Javascript cambia el estilo para mostrar o no al pasar el mouse).

Esto me funciona bien excepto en IE6 e IE7 cuando tengo un mapa de Google en la página.

En este caso, el menú desplegable simplemente no funciona.Sin embargo, la página sigue funcionando en FireFox 2.

Investigué un poco y descubrí que este puede ser un ejemplo del error del cuadro de selección de IE, pero no estoy seguro ya que Google Map parece estar usando un <div>, no un <iframe>.

¿Alguien más ha encontrado un problema similar a este? De ser así, ¿tiene alguna recomendación sobre la mejor manera de superar este problema?

Answer 1

No sé si esto solucionará tu problema pero quizás quieras intentarlo. esta solución en ccsplay.co.uk lo que soluciona el problema de los menús que aparecen debajo de las listas desplegables.No sé si funcionará con seguridad, pero vale la pena intentarlo.

Answer 2

Solucioné un problema similar con los menús desplegables que no aparecían en películas flash en IE6/IE7/IE8 usando esto jQuery:

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

Dónde primary-nav es el ID del elemento contenedor desplegable y footer es el ID del último elemento de la página.Luego utilicé el posicionamiento absoluto para reubicar los menús desplegables en la parte superior, donde pertenecen.

La razón por la que esto funciona es porque IE respeta el orden de origen más que el z-index.Sin embargo, todavía no se podía mostrar sobre un complemento de Windows Media Player.

Answer 3

Creo que eso podría suceder debido a una cosa Active-X que IE 6+ usa para analizar CSS.

Con el tiempo tuve que adaptar mi trabajo para incluir algunos trucos de IE en mi CSS para que fuera compatible con varios navegadores.

Primero intentaría crear un menú sin Javascript, usando CSS puro e incluyendo los trucos que mencioné.Probablemente solucionaría su problema.En realidad, no necesitas Javascript para cambiar estilos al pasar el mouse y cosas así.

Si quieres ver de qué se trata el hacking de CSS:hacer clic aquí

Si desea ver algunos ejemplos de menú CSS puro:hacer clic aquí

¡Espero que esto ayude!

Answer 4

De acuerdo a este hilo de google mapas, tienes razón: el código de Google inserta un IFrame.

Necesitarás usar la solución que Dan mencionó,

tal vez quieras intentarlo esta solución en ccsplay.co.uk que soluciona el problema de los menús que aparecen debajo de las listas desplegables

Alternativamente, ver HACK/Reparación de Internet Explorer para cuadro de selección que se muestra a través de DIV.

Básicamente, la solución es, usando JavaScript, colocar su menú CSS en un IFrame en IE6.

Una solución alternativa es utilizar JavaScript para ocultar el mapa de Google cuando se despliega el menú CSS, o reemplazar el mapa de Google con un mapa estático (tal vez incluso un mapa estático de Google) cuando se despliega el menú CSS.

Answer 5

No tengo una respuesta inmediata para usted, pero las herramientas mencionadas en esta respuesta (particularmente el IE DOM Inspector) puede ayudar.