Ho appena notato uno strano comportamento in IE7.
Ho pulsanti di opzione con le etichette associate come segue:
Il pulsante radio è nascosto tramite css con display: nessuno o visibilità: nascosto (non chiedere)
Il problema è che quando faccio clic sull’etichetta in IE7 (non ho ancora visto altre versioni di IE) il pulsante di opzione associato non viene effettivamente verificato. L’ho confermato con jquery: l’evento click label è stato triggersto, ma l’evento click sul pulsante radio non lo è. Un post del modulo conferma anche che il pulsante di opzione selezionato non cambia.
Funziona correttamente in firefox e funziona anche correttamente se rimuovo il CSS che nasconde i pulsanti di opzione.
È un bug di IE o mi sto perdendo qualcosa?
Probabilmente ha a che fare con il display: none – potresti anche scoprire che gli elementi nascosti non ricevono i loro valori inviati con il resto del modulo. Se hai il controllo su di esso, puoi provare a posizionare gli elementi fuori dallo schermo piuttosto che nasconderlo .
Questa è una risposta wiki per riunire tutte le diverse risposte e opzioni.
Opzione 1: sposta l’elemento fuori dallo schermo anziché nasconderlo completamente
position: absolute; top: -50px; left: -50px;
Opzione 2: utilizza un po ‘di JavaScript per impostare il pulsante di opzione da verificare quando si fa clic sull’etichetta
$("label").click(function(e){ e.preventDefault(); $("#"+$(this).attr("for")).click().change(); });
Opzione 3: imposta la larghezza e / o l’opacità dell’elemento a zero
width: 0; /* and/or */ -moz-opacity:0; filter:alpha(opacity:0); opacity:0; outline:none; /* this prevents IE8 from having the line around it even though it's invisible */
Opzione 4: usa un altro browser 🙂
Fondamentalmente, le specifiche per queste cose non specificano in modo specifico quale comportamento usare, ma IE generalmente prende la posizione che se non può essere visto, allora non funziona. “Visto” e “lavoro” possono significare cose diverse, ma in questo caso significa che quando display:none è impostato, l’etichetta non triggers il pulsante di opzione, il che porta ai soliti soluzioni alternative necessarie per così tante cose in IE.
Questo funziona per me
width: 0px;
Testato in IE7 e IE8. Pure CSS non javascript.
Questo problema esiste in IE6, 7, 8 e anche l’attuale 9 beta. Come soluzione, posizionare il pulsante radio fuori dallo schermo è una buona idea.
Ecco un’alternativa che non deve coinvolgere il designer o il css: Nascondi il pulsante normalmente, e fa in modo che qualsiasi funzione gestisca l’evento click per il pulsante gestisca anche l’evento click per l’etichetta.
$("label").click(function(e){ e.preventDefault(); $("#"+$(this).attr("for")).click().change(); });
Grazie Lane per questo. Lo aggiungo qui come risposta, quindi le persone non trascurano il tuo commento.
Sostituire
style="display:none;"
con
style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"
Puoi provare questo per IE7,8:
input{ position: absolute; z-index: -1; }
invece di
input{ display: none; }
C’è una bella raccolta di tue proposizioni:
input { -moz-opacity:0; filter:alpha(opacity:0); opacity:0; position: absolute; }
invece di:
display: none;
Stavo usando la funzione jQuery hide() , quindi non è stato facile cambiare il modo in cui un elemento è nascosto senza scrivere un codice più complesso. Ho trovato questa idea: utilizzo la class per memorizzare l’attributo verificato e reimpostare nuovamente questo attributo appena prima dell’invio.
if ($.browser.msie && $.browser.version == 7.0) { $('input[type=radio]').click(function() { $('input[name="'+$(this).attr("name")+'"]').each(function(){ if ($(this).attr("checked")){ $(this).addClass("checked"); }else{ $(this).removeClass("checked"); } }); }); $('form').submit(function(){ $('input.checked').each(function(){ $(this).attr("checked","true"); }); }); }
Nel mio caso funziona come un incantesimo.