Immagini al posto di input radio. (su IE non funziona)

[lazybone]

Ciao a tutti,
ho scritto questo piccolo script per sostituire dei radio button con un'immagine:
http://jsfiddle.net/fm75q33c/
come potete vedere funge su IE, Firefox e Chrome.

Il problema nasce nel momento in cui metto i radio button dentro un form:
http://jsfiddle.net/fm75q33c/1/
in quanto su IE non funziona più.

Sapete darmi una mano per risolvere cambiando meno codice possibile?

Grazie in anticipo!

[KillerWorm]

Ciao, a me funzionano entrambi anche su IE (testato con IE9 su vista).
Che versione stai usando?

Tieni giusto presente che su IE8, e inferiori, non è supportata la proprietà opacity, in tal caso puoi rimediare aggiungendo la proprietà filter (vedi la nota sulla documentazione). Ma questo sembra non riguardare il problema da te descritto perché prescinde dall'uso o meno di opacity.

A mio parere è più probabile che tu abbia qualche errore sul codice html. Nel caso puoi controllare sulla console web del tuo browser o sul validatore.
Ripeto, i due fiddle che hai linkato a me funzionano entrambi regolarmente.


PS: di norma, i tag img devono sempre avere l'attributo alt (anche se vuoto)perché il codice risulti validato.

[lazybone]

Ciao KillerWorm,
intanto grazie per la risposta.

Io l'ho testato con IE 11.0.4.

Il problema non riguarda la proprietà opacity. Quella funziona regolarmente anche con IE.

Per capire meglio il problema ti posto questi 2 esempi uguali ai 2 precedenti ma senza nascondere il radio button.
Il primo è senza il tag <form> e funziona con tutti i browser:
http://jsfiddle.net/fm75q33c/2/

Il secondo è con il <form>:
http://jsfiddle.net/fm75q33c/3/
e con IE mi checka il radio solo se clicco sul radio stesso e non me lo checka se clicco sull'immagine.

Spero che ora sia più chiaro il problema...
Grazie!

[lazybone]

Ah, dimenticavo... il validatore non rileva niente di interessante.
Sembra tutto ok da quel punto di vista...

[KillerWorm]

Non posso testarlo, sono antiquato, non ho IE11.
Ad ogni modo ho visto un po' in giro e sembra proprio un bug di IE11
https://www.google.it/#q=form+label+ie11

Qualcuno propone di risolvere in questo modo:

label{
    display: inline-block;
}
label img{
    pointer-events: none;
}

[lazybone]

Grazie mille KillerWorm!
Il tuo aiuto mi è servito a inquadrare meglio il problema!
La soluzione proposta funzionava ma con dei limiti... infatti non fungevano più gli effetti al passaggio del mouse (cursor->pointer e opacity->1).

Alla fine ho risolto con un pizzico di jquery... gli devo dare un'altra occhiata ma sembra tutto ok!!!
Ecco la soluzione:
http://jsfiddle.net/fm75q33c/6/

Grazie ancora per l'aiuto!