Come prevenire la perdita di eventi attraverso un elemento di sovrapposizione in IE?

Question

Dato il seguente codice HTML:

<div class="with-shield"> 
    <div class="shield"></div> 
    <input type="radio"/> 
</div> 
​ 

... e CSS:

.with-shield { 
    position: relative; 
} 

.shield { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 
} 

(Fiddle).

Firefox e Chrome non lasciate che si fa clic sul pulsante di scelta (come il .shield è posizionato sopra la parte superiore di esso), ma IE9 (e presumo versioni precedenti) fa (anche se gli strumenti di sviluppo mostra .shield è correttamente in posizione) .

Come posso cambiare il CSS per far assorbire .shield eventi click (cioè per fermare un utente di essere in grado di selezionare la radio) in IE?

Ho bisogno di questo come io sto presentando i risultati di un cliente sondaggio ai dipendenti, semplicemente rivisualizzando la vista modulo; Voglio aggiungere una sovrapposizione per impedire ai dipendenti di modificare i valori accidentalmente (ho già disabilitato tabIndex ecc.).

Answer 1

po 'tardi, ma fare qualcosa di simile:

#BlockAction{bottom: 0; left: 0; position: absolute; top: 0; right:0; z-index: -1;} 
#BlockAction.Blocked{z-index: 1000; cursor:wait;background-color:#fff;opacity:0} 

Il colore di sfondo e l'opacità cercherà di soddisfare per consentire IE9 sfondo trasparente fa clic per passare attraverso. Altri browser catturano il clic senza di esso.

Answer 2

Appena avuto lo stesso problema di recente. di Muthu Kumaran è grande, tranne che non ha tenuto in considerazione IE < 8. Ecco come si può fare:

.with-shield { 
    position: relative; 
} 

.shield { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 

background-color:#fff; 
opacity:0; 
filter: alpha(opacity = 001); 

} 

Purtroppo né jsfiddle né jsbin sta eseguendo correttamente su IE8 in modo da posso mostrarvi, ma ho creato un prova la pagina nella mia macchina locale e testata e funziona come previsto.

Answer 3

e anche più tardi alla festa, ma questo è quello che ho fatto:

Basta usare una codifica Base64 di una GIF trasparente di 1x1 pixel come sfondo, questo si ferma tutti i clic/rubinetti (testato anche su IE9 e IE8).

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);