Etykieta obrazu dla wejścia w formie nie klikalnej w IE11

Problem

W IE11 obrazek w poniższym kodzie można kliknąć, aby aktywować / przełączyć wejście w etykiecie: 

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

Podczas gdy obraz w tym samym kodzie, ale wewnątrz <form> nie można kliknąć, aby aktywować / przełączyć wejście: 

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

(Demo w jsfiddle )

Przykład

zauważ, że w przykładowej animacji powyżej klikam drugi obrazek, który nie działa, ale klikanie na tekst działa (po prostu zrobiłem to, aby zademonstrować).

To zostało przetestowane i odtworzone na:

  • IE 11.0.9600.16428 na Windows 7 Pro SP1 x64.
  • IE 11.0.9600.16438 na tablecie Windows RT 8.1.
  • IE 11.0.9600.17105 na Windows 7 Pro SP1 x64.
  • IE 11.0.10240.16431 na Windows 10
Ten problem nie występuje w IE9, IE10, Microsoft Edge i innych przeglądarkach.

Pytania:

  1. Czy można to rozwiązać bez JS podczas korzystania z tagów obrazów?
  2. Jeśli nie, Jakie są inne możliwe rozwiązania?
  3. (opcjonalne) Dlaczego obraz w drugim przykładzie nie uruchamia elementu wejściowego (podczas wykonywania tego w pierwszym)?
Author: Qtax, 2013-11-25
Source

2 answers

Jednym ze sposobów naprawienia tego problemu jest użycie pointer-events: none na obrazku i dostosowanie etykiety za pomocą na przykład display: inline-block. (pointer-events jest wspierane W IE11.)

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

(Demo w jsFiddle )

 86
Author: Qtax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-26 16:34:16

To nieco starsze pytanie, ale jako że jest dość wysoko w wyszukiwarce google, zamieszczę tutaj jeszcze jedną odpowiedź, która naprawia to we wszystkich wersjach IE.

.

Pole wyboru / radio musi być poza etykiety, musi mieć własny unikalny identyfikator, a etykieta musi mieć atrybut dla , który zawiera ID checkbox / radio związane z: 

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

Jeśli to zrobiłeś i używasz PHP (którym prawdopodobnie jesteś), możesz użyć tego fragmentu kodu: 

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>
    <?
}

I know its JS, ale tak naprawdę nie ma innej poprawki dla =< IE10 bez użycia JS.

Wykrywa wszystkie wersje IE( IE10 i 11 w tym, nie mam pojęcia o Spartanie tho, myślę, że tego nie wykrywa).

Ps.: Odpowiedź powyżej mnie nie działa w IE8, IE9 i IE10. Tak dla twojej wiadomości.

 4
Author: MiChAeLoKGB,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-14 13:54:13