Теги изображений в ярлыках с надписью «для» не реагируют на клики в IE7

Question

В простой настройке с изображением внутри этикетки:

<input type='checkbox' id='x'>
<label for='x'>click me <img src='http://placedog.com/20/20'></label>

нажатие на изображение контролирует флажок так же, как нажатие на текст в ярлыке или нажатие на сам флажок в большинстве браузеров. То, что он не работает в IE7, меня не особенно удивляет, но мне интересно, есть ли какой-то странный способ IE заставить работать в этом браузере.

поддельное редактирование хмм, видимо, это не работает и в IE8.

Answer 1

Немного грубовато и готово, но работает без JQuery ...

<p>
   <input type="radio" id="rb1" value="rb1" />
   <label for="rb1">
       <img src="image1.png"
            onclick="try{document.getElementById('rb1').checked=true;}catch(e){};return true;" />
   </label>
</p>
<p>
   <input type="radio" id="rb2" value="rb2" />
   <label for="rb2">
       <img src="image2.png"
            onclick="try{document.getElementById('rb2').checked=true;}catch(e){};return true;" />
   </label>
</p>

Может быть улучшено, но довольно устойчиво в качестве обходного пути.

Answer 2

В качестве альтернативы вы можете поместить абсолютно позиционированный div, охватывающий всю ширину и высоту этикетки. Обратите внимание, что вы должны использовать фильтр непрозрачности IE, чтобы сделать div div невидимым, потому что с видимостью: hidden он полностью игнорируется IE7 и 8.

<style>
.cover{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: yellow;
  filter: alpha(opacity=0);
  opacity: 0;
}
</style>

<label>
  <div class="cover"></div>
  <img src="img.png" alt="img" />
</label>

Answer 3

Как обсуждалось в комментариях, IE не нравится эта идея.Единственный способ обойти это - немного Javascript - вот пример использования JQuery.

$("label img").live("click", function() {
   $("#" + $(this).parents("label").attr("for")).click();
});

См. http://snook.ca/archives/javascript/using_images_as для обсуждения этого вопроса.