IE 11 Bug - изображение внутри этикетки внутри формы

Ответ 1

Моя разметка выглядит так (классы и другие лишние атрибуты удалены):

<li>
    <label>
        <figure>
            <img>
        </figure>
        <div>
            <label></label>
            <input type="radio">
        </div>
    </label>
</li>

Это немного грязно, потому что некоторые из них автоматически генерируются Drupal. Он не работал в IE 11, но я сделал это, добавив:

img {
    pointer-events: none;
}

Мне не нужно ничего менять, и я не вижу другого специального CSS-обмана, который я могу видеть.

Ответ 2

Как я уже говорил ранее в упомянутом вопросе, существует чистый способ CSS.

Если ваше изображение display: block, это исправление все еще можно использовать, даже если вам нужно добавить еще несколько обманов. Например:

CSS

label img{
    display: block; /* requirement */
    /* fix */
    pointer-events: none;
    position: relative;
}

/* fix */
label{
    display: inline-block;
    position: relative;
}
label::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

HTML:

<form>
<label>
    <input type="checkbox"> some text
    <img src="http://placekitten.com/200/200" alt="kitten!">
</label>
</form>

Fiddle

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

Ответ 3

img {
    pointer-events: none;
    position: relative;
    z-index: -1;
}

Это разрешило это в моем случае. Img будет помещен за меткой, но "светит". Надеюсь, это поможет.

Ответ 4

Вы можете поместить изображение в фоновом режиме метки.

<label  for="myField1" ><img src="image1.jpg"></label>

становится

<style>
 #lblMyField1 {  
    background-image: url('image1.jpg');
    background-position: center center;/* depend..*/
    background-repeat: no-repeat; 
 } 
</style>

<label id="lblMyField1" for="myField1" >&nbsp;</div>

Ответ 5

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

Гнездо ввода

<label>
    <input />
    <img />
</label>

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

Исправление JavaScript

Другим вариантом является выполнение щелчка по соответствующему вводу, если он не произошел естественным образом. В этом подходе мы устанавливаем таймаут для клика после 100 мс. Любой щелчок, который происходит в противном случае, очистит наш тайм-аут:

$("label[for]").each(function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    $(this).on("click", function () {
        timeout = setTimeout(function () {
            element.click();
        }, 100);
    });

    element.on("click", function () {
        clearTimeout(timeout);
    });

});

Браузеры, которые уже работают, очистят тайм-аут, предотвращая второй щелчок. Internet Explorer 11 щелкнет по таймауту.

Демо: http://jsfiddle.net/CG9XU/

Одно из предостережений заключается в том, что это решение работает только для ярлыков, которые были на странице, когда был запущен случай. Если у вас есть формы, появляющиеся позже (возможно, через ajax), вам нужно будет слушать выше в DOM. Следующий пример прослушивает уровень document:

$(document).on("click", "label[for]", function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    timeout = setTimeout(function () {
        element.click();
    }, 100);

    element.one("click", function () {
        clearTimeout(timeout);
    });

});

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

Ответ 6

Вот решение, которое работало для меня с помощью pointer-events:none без необходимости устанавливать мое изображение в position:relative, поскольку мне нужно, чтобы он был position:absolute для моего дизайна.

HTML

`<form>
    <input id="radio-button-action" type="radio" name="search" value="open">
    <label for="radio-button-action">
        <div class="img-wrapper">
            <img src="images/image.jpg" alt="image">
        </div>
    </label>
</form>`

CSS

Итак, в этом примере у нас есть изображение, которое должно быть позицией: absolute

img {
    position: absolute
    top: 10px;
    right: 10px;
    height: 25px;
    width: 25px;
    display: inline-block; /* can be block, doesn't matter */
}

Теперь установите pointer-events на обертку img-div

.img-wrapper {
    position: relative /* this is required for this to work */
    pointer-events: none /* this is what will make your image clickable */
}

Ответ 7

Работает с

img {
  pointer-events: none;
}