метка изображения для ввода в форме, не кликабельна в IE11

Question

Проблема

В IE11 изображение в следующем коде кликабельна для включения/переключения входа в метке:

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

В то время как изображение в этом точно тот же код, но внутри <form> не кликабельны для включения/переключения входа:

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

(Demo at jsfiddle)

Обратите внимание, что в примере анимации выше я щелкая второе изображение, которое не работает, но при нажатии на текст работы (просто, что для демонстрации).

Это была протестирована и воспроизведена на:

• IE 11.0.9600.16428 на Windows 7 Pro SP1 x64.
• IE 11.0.9600.16438 на планшет Windows RT 8.1.
• IE 11.0.9600.17105 на Windows 7 Pro SP1 x64.
• IE 11.0.10240.16431 на для Windows 10

Эта проблема не возникает в IE9, IE10, Microsoft пограничного и другие браузеры.

Вопросы:

1. Может ли это быть решена без JS пока еще теги изображений?
2. Если нет, то какие еще возможные решения есть?
3. (необязательно) Почему во втором примере изображение не запускает входной элемент (при выполнении его в первом)?

Answer 1

Один из способов исправить это с изображением pointer-events: none, а также отрегулировать ярлык, например, display: inline-block. (В IE11 pointer-eventsis supported.)

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

(Demo at jsFiddle)

Answer 2

немного старше вопрос, но его довольно высоко в поиске Google, я выложу здесь еще один ответ, который фиксирует это во всех IE версии.

.

Флажка/радио должно быть вне этикетки, он должен иметь собственный уникальный идентификатор и ярлык должен иметь атрибут для, который содержит идентификатор CheckBox/радио его связанный с:

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

Если вы сделали, и если вы используете PHP (который вы, вероятно, являются), вы можете использовать этот кусок кода:

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

Я знаю его JS, но на самом деле нет другого исправления для =< IE10 без использования JS.

Он обнаруживает все IE, версии (включая IE10 и 11, понятия не имеют о Spartan tho, я думаю, что он не обнаружит этого).

Пс .: Ответ выше меня на самом деле не работает для IE8, IE9 и IE10. Просто так вы знаете.