Question

我们遇到了导致IE 8和IE 9出现问题的问题。单击标签后，应检查单选框。除了IE 8/9之外的所有浏览器都没有检查单选按钮

<label for="so100">
    <img alt="" src="images/type6img.jpg" class="anitem1pic">
    <input type=radio value=1 name="site" id="so100" />
    <span class="anitem1">Stag</span>
</label>

Answer 1

Known IE "bug"被包裹的图像不会触发收音机

在your example中，文字有效，图片不会：

这是一份带有建议的副本

Clickable label not working in IE 8

以下是基于Using images as labels in internet explorer的测试变通方法。文章中的解决方案打破了Chrome。我在条件注释中的包装可以防止脚本破坏在点击时触发的浏览器。如果IE9和10的工作方式与Chrome相同，则可以将if IE更改为if IE8

Live Demo

<!--[if IE]>

<script type="text/javascript">
$(function() {
  $("label img").on("click", function() {
    $("#" + $(this).parents("label").attr("for")).click();
  });
});
</script>

<![endif]-->

My idea to have two labels也没有用，因为它是IE抱怨的图像。

<label for="so100">
  <img alt="" src="http://lorempixel.com/output/abstract-q-c-50-50-8.jpg" class="anitem1pic">
</label>        

<input type=radio value=1 name="site" id="so100" />
<label for="so100">    
  <span class="anitem1">Stag</span>
</label>

然而，使用背景图像

Answer 2

您应该使用这种方式，这适用于所有浏览器：

<label for="radio1"> Option 1 </label> 
<input type="radio " id="radio1" name= "option" />

<label for="radio2"> Option 2 </label> 
<input type="radio " id="radio2" name= "option" />

点击标签不会检查ie8 / 9中的单选框

2 个答案: