etichetta immagine per ingresso in una forma non cliccabile in IE11

Question

Il problema

In IE11 l'immagine nel seguente codice è selezionabile per attivare/alternare l'ingresso nell'etichetta:

<label> 
    <input type="checkbox"> some text 
    <img src="http://placeimg.com/100/100/any" alt="some img"> 
</label> 

Mentre l'immagine in questo stesso codice esattamente ma all'interno di un <form> non è cliccabile per attivare/commutare l'ingresso:

<form> 
<label> 
    <input type="checkbox"> some text 
    <img src="http://placeimg.com/100/100/any" alt="some img"> 
</label> 
</form> 

(Demo at jsfiddle)

Si noti che nell'esempio animazione qui sopra sto cliccando la seconda immagine, che non funziona, ma cliccando sul testo funziona (appena fatto che a dimostrare).

Questo è stato testato e riprodotto su:

• IE 11.0.9600.16428 su Windows 7 SP1 x64 Pro.
• IE 11.0.9600.16438 su tablet Windows RT 8.1.
• IE 11.0.9600.17105 su Windows 7 Pro SP1 x64.
• IE 11.0.10240.16431 su di Windows 10

Questo problema non si verifica in IE9, IE10, Microsoft bordo, e altri browser.

Domande:

1. può risolvere il problema senza JS pur utilizzando i tag immagine?
2. In caso contrario, quali altre possibili soluzioni ci sono?
3. (Opzionale) Perché l'immagine nel secondo esempio non attiva l'elemento di input (mentre lo si fa nel primo)?

Answer 1

Un modo per risolvere questo problema è con pointer-events: none sull'immagine e regolare l'etichetta con ad esempio display: inline-block. (pointer-eventsis supported in IE11.)

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

(Demo at jsFiddle)

Answer 2

È questione un po 'più vecchio, ma come la sua piuttosto alto in Ricerca Google, vi posterò qui una risposta più che risolve questo in tutta IE versioni.

.

La casella/radio deve essere fuori dell'etichetta, deve avere il proprio ID univoco ed etichetta deve avere attributo per che contiene l'ID di casella/radio con relativo a:

<label for="my_lovely_checkbox">Hello good friend</label> 
<input type="checkbox" value="Hello" id="my_lovely_checkbox"> 

Se fatto e se si utilizza PHP (che probabilmente sei), è possibile utilizzare questo pezzo di codice:

if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) { 
    ?> 
    <script> 
     $(document).ready(function() { 
      $("label img").on("click", function() { 
       $("#" + $(this).parents("label").attr("for")).click(); 
      }); 
     }); 
    </script> 
    <? 
} 

so che la sua JS, ma non v'è in realtà alcuna altra correzione per =< IE10 senza l'utilizzo di JS.

Rileva tutte le versioni di IE (inclusi IE10 e 11, non ho idea di Spartan, penso che non lo rilevi).

Ps .: La risposta sopra di me in realtà non funziona per IE8, IE9 e IE10. Solo per quello che sai.