Метка изображения для ввода в форме, не доступной в IE11

Проблема

В 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>

(Демо в 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 Edge и других браузерах.

Вопросы:

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

Ответ 1

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

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

(Демо в jsFiddle)

Ответ 2

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

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

<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, я думаю, что он не обнаружит этого).

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