Come risolvere il bug di sovrapposizione della selezione in IE6?

Question

Quando si utilizza IE, non è possibile inserire un div con posizione assoluta su un elemento di input selezionato.Questo perché l'elemento select è considerato un oggetto ActiveX e si trova sopra ogni elemento HTML nella pagina.

Ho già visto persone che nascondevano le selezioni quando aprivano un div popup, il che porta a un'esperienza utente piuttosto negativa con la scomparsa dei controlli.

FogBugz in realtà aveva una soluzione piuttosto intelligente (prima della v6) per trasformare ogni selezione in caselle di testo quando veniva visualizzato un popup.Ciò ha risolto il bug e ha ingannato l'occhio dell'utente, ma il comportamento non era perfetto.

Un'altra soluzione è in FogBugz 6 dove non usano più l'elemento select e lo ricodificano ovunque.

L'ultima soluzione che utilizzo attualmente è rovinare il motore di rendering di IE e forzarlo a eseguire il rendering della posizione assoluta <div> anche come elemento ActiveX, assicurando che possa vivere su un elemento selezionato.Ciò si ottiene posizionando un invisibile <iframe> dentro il <div> e modellandolo con:

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

Qualcuno ha una soluzione ancora migliore di questa?

MODIFICARE:Lo scopo di questa domanda è tanto informativo quanto è una domanda reale.Trovo il <iframe> trucco per essere una buona soluzione, ma sto ancora cercando miglioramenti come rimuoverlo brutto cartellino inutile che degrada l’accessibilità.

Answer 1

Non conosco niente di meglio di un Iframe

Ma mi viene in mente che questo potrebbe essere aggiunto in JS cercando un paio di variabili

1. cioè 6
2. Un indice Z alto (tendi a dover impostare uno z-index se stai fluttuando su un div)
3. Un elemento scatolare

Quindi uno script che cerchi questi elementi e aggiunga semplicemente un livello iframe sarebbe una soluzione accurata

Paolo

Answer 2

Grazie per la soluzione di hacking di iframe.È brutto e tuttavia elegante.:)

Solo un commento.Se ti capita di eseguire il tuo sito tramite SSL, il tag iframe fittizio deve avere un src specificato, altrimenti IE6 si lamenterà con un avviso di sicurezza.

esempio:

    <iframe src="javascript:false;"></iframe>

Ho visto alcune persone consigliare di impostare src su blank.html ...ma mi piace molto di più Javascript.Vai a capire.

Answer 3

Per quanto ne so ci sono solo due opzioni, la migliore delle quali è l'utilizzo menzionato di un iframe.L'altro nasconde tutte le selezioni quando viene mostrato l'overlay, portando a un'esperienza utente ancora più strana.

Answer 4

prova questo plugin http://docs.jquery.com/Plugins/bgiframe , dovrebbe funzionare!

utilizzo: $('.your-dropdown-menu').bgiframe();

Answer 5

Non penso che ci sia.Ho provato a risolvere questo problema nel mio lavoro.Nascondere il controllo di selezione è stata la soluzione migliore che siamo riusciti a trovare (essendo un negozio aziendale con un pubblico vincolato, l'esperienza dell'utente di solito non influisce sulle decisioni del PM).

Da quello che ho potuto raccogliere online mentre cercavo una soluzione, semplicemente non esiste una buona soluzione a questo.Mi piace la soluzione FogBugz (la stessa cosa fatta da molti siti di alto profilo, come Facebook), ed è effettivamente ciò che utilizzo nei miei progetti.

Answer 6

Faccio la stessa cosa con le caselle di selezione e Flash.

Quando si utilizza una sovrapposizione, nascondere gli oggetti sottostanti che potrebbero passare.Non è eccezionale, ma funziona.Puoi utilizzare JavaScript per nascondere gli elementi subito prima di visualizzare una sovrapposizione, quindi mostrarli di nuovo una volta terminato.

Cerco di non scherzare con gli iframe a meno che non sia assolutamente necessario.

Il trucco di utilizzare etichette o caselle di testo invece di caselle di selezione durante le sovrapposizioni è accurato.Potrei usarlo in futuro.

Answer 7

Mootools ha una soluzione abbastanza ben studiata utilizzando un iframe, chiamato iframeshim.

Non vale la pena includere la libreria solo per questo, ma se la hai comunque nel tuo progetto, dovresti essere consapevole che esiste il plugin "iframeshim".

Answer 8

C'è questo plugin jquery semplice e diretto chiamato bgiframe.Lo sviluppatore lo ha creato al solo scopo di risolvere questo problema in ie6.

L'ho usato di recente e funziona a meraviglia.

Answer 9

Quando si nascondono gli elementi selezionati, nasconderli impostando la "visibilità:nascosto" invece di visualizzare:nessuno altrimenti il ​​browser ridiscorrerà il documento.

Answer 10

Ho risolto questo problema nascondendo i componenti selezionati utilizzando CSS quando viene visualizzata una finestra di dialogo o una sovrapposizione:

selects[i].style.visibility = "nascosto";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}