Метка изображения для ввода в форме, не кликабельной в 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)

Example

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

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

  • IE 11.0.9600.16428 на Windows 7 Pro SP1 x64.
  • IE 11.0.9600.16438 на планшете Windows RT 8.1.
  • т. е. 11.0.9600.17105 на Windows 7 профессиональная с пакетом обновления 1 x64.
  • т. е. 11.0.10240.16431 на Windows 10

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

вопросы:

  1. можно ли это решить без JS при использовании тегов изображений?
  2. если нет, то какие другие возможные решения существуют?
  3. (необязательный) почему изображение во втором примере не запускает элемент ввода (делая это в первом)?
2   51   2013-11-25 20:30:47

2 ответа:

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

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

(демо на jsFiddle)

это немного более старый вопрос, но поскольку он довольно высок в поиске 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. Просто чтобы ты знал.