Textarea in IE7 scompare al passaggio del mouse

Question

Ho questo tipo di pagina di immissione dati di grandi dimensioni, un tipo di tabella di layout che utilizza div. Ogni riga ha sottotitoli che possono essere attivati ??/ disattivati. La commutazione viene attivata utilizzando le impostazioni di visibilità CSS. Ogni "cella" della tabella ha una piccola immagine nell'angolo, fai clic sull'immagine e si apre una finestra popup che ti consente di inserire note sulla voce.

Questa finestra pop-up ha un'area di testo e una serie di caselle di controllo, insieme a un pulsante (tipo di input = submit, credo). Il popup è un iframe nidificato all'interno di un div nascosto.

In IE7, una volta che hai aperto queste note iframe e fatto scorrere la pagina verso il basso, il mouse sull'area di testo del popup lo fa scomparire e mostra il contenuto della pagina sottostante. Le caselle di controllo mostrano anche la pagina seguente quando passi il mouse sopra.

Quindi, ho provato alcune correzioni diverse. L'indice Z era ciò che speravo potesse essere usato per risolvere questo problema. non molta fortuna. Potrei provare a sostituire l'area di testo con un semplice input type = text ma poiché le caselle di controllo mostrano anche questo errore, sospetto che anche l'inserimento di testo a una riga causerà l'errore.

Answer 1

oltre a bloccare gli elementi, l'indice z funziona per tutti gli elementi che hanno ciò che IE chiama hasLayout leggi di più

Answer 2

Il modo più semplice per attivare hasLayout (menzionato in un altro post) è aggiungere zoom: 1 .

Quando eseguo il debug di alcuni dei più stupidi problemi di visualizzazione di IE 6/7 a volte eseguo semplicemente il dump di un temporaneo

* {
    zoom: 1;
}

al mio CSS e vedere se qualcosa cambia. In tal caso, inizio ad aggiungerlo selettivamente agli elementi che iniziano con l'elemento, l'elemento padre / figlio dell'elemento, ecc.

zoom è supportato solo da IE, quindi è piuttosto "sicuro" avere nel tuo documento. Ti evita anche di dover fare qualcosa di folle come il posizionamento assoluto di elementi, ecc.

Answer 3

Se ricordo bene il lavoro di Z-Index funziona solo su elementi a blocchi che sono assolutamente posizionati. Quindi prova a impostare la posizione della finestra popup su assoluta e quindi prova z-index. Se è necessario che il popup si trovi in ??una determinata posizione, impostare l'elemento di avvolgimento in posizione relativa. Ho già riscontrato questo problema e credo di averlo risolto nel modo che ho descritto.

Answer 4

Ho avuto lo stesso identico problema con entrambi i campi di input e le textareas in IE7, ma solo se ho dato loro una larghezza.

Non ricordo da dove l'ho preso, ma ho trovato questa soluzione, potrebbe non essere molto elegante, ma ha risolto il problema. Aggiungi:

filter:alpha(opacity=100)

all'attributo css of style dei campi problematici.