Il modo migliore per correggere il menu a discesa CSS/JS in IE7 quando la pagina include Google Map

Question

Ho una pagina che utilizza <ul> elenchi per la navigazione (Javascript modifica lo stile per visualizzarlo o meno al passaggio del mouse).

Questo funziona bene per me tranne in IE6 e IE7 quando ho una mappa di Google sulla pagina.

In questo caso il menu a discesa semplicemente non funziona.Tuttavia, la pagina continua a funzionare in FireFox 2.

Ho fatto un po' di ricerche e ho scoperto che questo potrebbe essere un esempio del bug IE Select Box, ma non ne sono sicuro poiché sembra che Google Map utilizzi un <div>, non un <iframe>.

Qualcun altro ha riscontrato un problema simile a questo e, in tal caso, ha qualche consiglio sul modo migliore per superare questo problema?

Answer 1

Non so se questo risolverà il tuo problema ma potresti provare questa soluzione su ccsplay.co.uk che risolve il problema dei menu che appaiono sotto gli elenchi a discesa.Non so se funzionerà di sicuro, ma vale la pena provare.

Answer 2

Ho risolto un problema simile con i menu a discesa che non venivano visualizzati sui filmati flash in IE6/IE7/IE8 utilizzando questo jQuery:

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

Dove primary-nav è il ID dell'elemento contenitore a discesa e footer è il ID dell'ultimo elemento della pagina.Ho quindi utilizzato il posizionamento assoluto per ricollocare i menu a discesa in alto a cui appartengono.

Il motivo per cui funziona è perché IE rispetta l'ordinamento della sorgente più di quanto non faccia z-index.Tuttavia, non era ancora in grado di essere visualizzato sopra un plug-in di Windows Media Player.

Answer 3

Credo che ciò potrebbe accadere a causa di un oggetto Active-X che IE 6+ utilizza per analizzare i CSS.

Nel corso del tempo ho dovuto adattare il mio lavoro per includere alcuni hack di IE sul mio CSS in modo che fosse compatibile con diversi browser.

Per prima cosa proverei a creare un menu senza Javascript, utilizzando CSS puro e includendo gli hack che ho citato.Probabilmente risolverebbe il tuo problema.In realtà non hai bisogno di Javascript per cambiare gli stili al passaggio del mouse e cose del genere.

Se vuoi scoprire in cosa consiste l'hacking CSS:clic Qui

Se vuoi dare un'occhiata ad alcuni esempi di menu CSS puri:clic Qui

Spero che questo ti aiuti!

Answer 4

Secondo questo thread di Google Maps, hai ragione: un IFrame viene inserito dal codice Google.

Dovrai utilizzare la soluzione menzionata da Dan,

potresti provare questa soluzione su ccsplay.co.uk che risolve il problema dei menu che appaiono sotto gli elenchi a discesa

In alternativa, vedi HACK/Correzione di Internet Explorer per la casella di selezione visualizzata tramite DIV.

Fondamentalmente la soluzione è, utilizzando JavaScript, posizionare il menu CSS in un IFrame in IE6.

Una soluzione alternativa è utilizzare JavaScript per nascondere la mappa di Google quando il menu CSS viene abbassato o sostituire la mappa di Google con una mappa statica (forse anche una mappa statica di Google) quando il menu CSS viene abbassato.

Answer 5

Non ho una risposta immediata per te, ma gli strumenti menzionati in questa risposta (in particolare IE DOM Inspector) può aiutare.