Щелчок ярлыка не работает в IE 8

Ответ 1

Причина, по которой он работает так, как это делается в Firefox и др., заключается в том, что предполагается <label>, когда он получает атрибут "для", который указывает на поле ввода (по значению "id" ). Если это не работает в IE, это потому, что Microsoft либо интерпретировала стандарт по-другому, либо просто не смогла реализовать его правильно. (Я не вижу ясного языка в ссылке w3c, которую я нашел, чтобы указать, нужно ли сосредоточиться на текстовом содержимом ярлыка и передать его.)

Ответ 2

Я искал ответ на этот вопрос и написал для него быстрый грязный обработчик jquery:

$("label").click(function(){
    if ($(this).attr("for") != "")
        $("#" + $(this).attr("for")).click();
});

Ответ 3

Там немного более чистый подход для изменения разметки, которая не включает (уродливые) хаки CSS или Javascript; измените тег <img> на тег <span> с фоновым изображением соответствующего размера. Например:

<li>
  <input value="someRadioButton" name="ctl00$mainContent$group" type="radio"
         id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />
  <label for="ctl00_mainContent_someRadioButton">
    <span class="extraPadding-Right-10" style="background-image: url(https://xxy.com/some_mark_37x23.gif); width: 100px; height: 100px; display: inline-block" />
  </label>
</li>

Соответственно замените ширину и высоту изображения.

Ответ 4

Я также обнаружил, что если у вас есть скрытый ввод с display:none или visibility:hidden и они полагаются на метку для выбора, это не будет работать в ie8.

Мое обходное решение состояло в том, чтобы иметь overflow:hidden на содержащем элементе и расположить вход за пределами этой области.

Ответ 5

Я думаю, у меня есть лучшее решение для взлома этой проблемы. Я объясню, почему для первого.

Использование jquery для нажатия на ярлык работает, но не когда вы используете входной файл, потому что вы получите отказ в доступе.

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

Теперь я объясню идею взлома:

У вас есть ярлык с изображением внутри, когда вы нажимаете изображение, IE8 не запускает ярлык. Но если вы пишете текст в ярлыке, когда вы нажимаете на текст IE8, загорайте ярлык.

Идея состоит в том, чтобы установить интервал внутри метки с размером метки (ширина и высота)

Хорошо, но если у вас нет текста внутри, это не будет работать, но если вы измените цвет фона, он будет работать.

Итак, что вам нужно сделать:

• Поместите пробел с размером роли метки
• Введите цвет фона и сделайте его прозрачным.
• Расположите Span, используя относительное положение, чтобы поместить Span точно над меткой.

Это немного сложно сделать, но я думаю, что это затронет еще много ситуаций. Пример ярлыка, запускающего файл типа ввода:

<label for="" id="lblInput" style="cursor: pointer; z-index:3;">
    <img src="../Imagens/SemPerfil.jpg" ID="imgFoto" Style="max-width: 280px; max-height: 180px;z-index:2;" />
    <span style="position:relative;
        top:-180px;display:block;height:180px;width:280px;
        z-index:1;background-color:Aqua;
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)';
        background: rgba(255, 255, 255, 0.0);" >
    </span>
</label>

Я надеюсь, что это сработает и спасет вас. Как это спасло меня.

Ответ 6

Вы уверены, что не просто смотрите на опечатку? Проверьте " ctl00_mainContent_someRadioButton" против " ctl00_mainContent_somelRadioButton"

Ответ 7

Похоже, что IE неправильно обрабатывает метки с элементами img. Единственными разумными способами, которые я смог найти для решения этой проблемы, являются с использованием поведения HTML-компонентов, Обработчики Javascript или CSS hacks. Я не пробовал все это, поэтому я не могу гарантировать, что они будут работать.

Ответ 8

Я попробовал некоторые из других решений, размещенных здесь, и в конечном итоге внес поправки в них, чтобы получить рабочее исправление вашей проблемы. Моя проблема была схожа, хотя HTML выглядел несколько иначе, причем тег LABEL обертывал как изображение, так и переключатель INPUT.

Решение, которое я включил ниже, гарантирует, что все обработчики onClick будут правильно запускаться на самом переключателе. Он также делает это только один раз, а не в браузерах, где метка переключателя работает нормально.

Это код jQuery, который я использовал для решения проблемы в Internet Explorer 11:

$('LABEL > IMG').click(function () {
    var inputId = $(this).parents('LABEL:first').attr("for");
    if (inputId) $('#' + inputId).not(':checked').attr('checked', true).click();
});

В приведенном выше коде используется метод jQuery attr() для управления свойством checked. Если вы используете jQuery 1.6 или выше, вы должны изменить это, чтобы вместо этого использовать метод jQuery prop().

Ответ 9

Это работает для меня с группой радиовходов, за которыми следуют метки, содержащие изображение. В основном используется вместо использования для атрибута во всех браузерах

      inputs.each(function() {

         $(this).click(function (e) {
             // do stuff ...
         });

        // adding click handler to label containing image 
        $(this).next().on('click', function(event) {
            // prevent 'for' attribute firing
            event.preventDefault();
            // check and trigger click on input
            $(this).prev().prop("checked", true).trigger('click');
        });
     });