iframe shimming o ie6 (e sotto) select z-index bug

Question

Uhm Non sono sicuro se qualcuno ha riscontrato questo problema
una breve descrizione è su IE6 qualsiasi <select> oggetti vengono visualizzati su qualsiasi altro elemento, anche div .. significato se si dispone di un effetto javascript di fantasia che visualizza un div che dovrebbe essere in cima a tutto (ad esempio lightbox, multibox ecc.) onclick di un determinato elemento e che div si sovrappone a uno <select> div div come è sotto il <select> [in questo caso un z-index massimo e minimo non funziona]

ho provato googling e trovato la soluzione
lo spessore iframe ma volevo qualche bella alternative pulite o meglio ancora qualcuno ha trovato una soluzione migliore? poiché il metodo che utilizza iframe usa circa 130mb di ram potrebbe rallentare le macchine delle persone povere

Answer 1

Non è necessario nascondere ogni select utilizzando un ciclo. Tutto ciò che serve è una regola CSS come:

* html .hideSelects select { visibility: hidden; } 

E il seguente JavaScript:

//hide: 
document.body.className +=' hideSelects' 

//show: 
document.body.className = document.body.className.replace(' hideSelects', ''); 

(In alternativa, è possibile utilizzare l'implementazione preferita addClass/removeClass).

Answer 2

Prima di IE7 l'elenco a discesa era un controllo "a finestra" che significava che era rappresentato come un controllo direttamente da Windows piuttosto che dal browser che sintetizzava. esso. Pertanto, non è stato possibile supportare lo z-indexing rispetto ad altri controlli sintetizzati.

Per apparire su un DDL, è necessario utilizzare un altro controllo con finestra, come IFRAME. È anche possibile utilizzare una funzionalità IE poco conosciuta, chiamata window.createPopup(), che essenzialmente fa apparire un popup chromeless. Ha delle limitazioni, come il click-out inarrestabile, ma in realtà sono un po 'utili se stai costruendo un sistema di menu hover.

Answer 3

C'è un plugin per jquery chiamato bgiframe che rende il metodo iframe abbastanza facile da implementare.

Personalmente, come sviluppatore web, sono al punto che non mi interessa più l'esperienza utente in IE6. Renderò il rendering il più vicino possibile a "correggere" e assicurarmi che sia funzionale, ma per quanto riguarda la velocità, troppo male. Possono aggiornare. IE7 (anche se ancora piuttosto lento, rispetto ad ogni altro browser) è uscito da 2 anni (quasi fino al giorno!). IE8 uscirà a breve. Firefox è disponibile per ogni piattaforma. Safari è anche un'opzione (e super veloce). Opera è disponibile per la maggior parte/ogni piattaforma.

IE6 è stato rilasciato più di 7 anni fa. IMHO, non c'è motivo di continuare a usarlo, a parte gli utenti pigri e i dipartimenti IT incompetenti (o se sei uno sviluppatore web).

Answer 4

C'è anche il metodo activex, che sto iniziando a esplorare. Richiede la creazione di codice condizionale per utilizzare un controllo activex invece di una casella di selezione per ie6. C'è un demo script che mostra la tecnica, che è discussed in more detail here.

Aggiornamento: sembra che MS Office sia necessario affinché il controllo active-x sia sul computer dell'utente. In teoria, potrebbe essere possibile includerlo da qualche parte, in qualche modo, ma sta diventando molto più complicato.

Answer 5

nel caso in cui qualcuno sia interessato, ecco un codice di smorzamento IE.

* html .shimmed { 
    _azimuth: expression(
     this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'), 
     'inherit'); 
} 

ref: this gist da subtleGradient e questo post by Zach Leatherman

Answer 6

La soluzione più semplice ed elegante per quel fastidioso bug di IE è disponibile all'indirizzo: http://docs.jquery.com/Plugins/bgiframe utilizzando jQuery.

Ho raggiunto questa conclusione dopo aver provato per 2 giorni a farlo funzionare con WebSphere Portal/Applicazioni Portal dove tutto è dinamico, incluso il menu a comparsa.

Answer 7

So che molte persone hanno suggerito i propri suggerimenti, ma nel mio caso, ho semplicemente nascosto select usando jquery come il seguente.

$(':date').dateinput({ 
    format: 'dd/mm/yyyy', 
    onBeforeShow: function(event) { 
     $('select').hide(); 
    }, 
    onHide: function(event) { 
     $('select').show(); 
    } 
});