可点击的标签在IE 8中不起作用

Question

我有以下列表项:

<li>
    <input value="someRadioButton" name="ctl00$mainContent$group" type="radio"
        id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />
    <label for="ctl00_mainContent_someRadioButton">
        <img class="extraPadding-Right-10" src="https://xxy.com/some_mark_37x23.gif" />
    </label>
</li>

所以显示的是一个单选按钮和旁边的图像.当我在FireFox,Chrome和Safari中点击该图像时会触发收音机onclick中指定的showSomeInfo().我不知道为什么我猜,因为它包裹在一个标签中,而且该标签与该单选按钮有关......

但无论如何这不是我的问题.我喜欢当你点击图像时,调用javascript方法showSomeInfo().但问题是它适用于除IE 8以外的所有浏览器.如果我在IE 8中打开此页面,点击图像什么都不做,我不知道为什么.我对这个感到困惑.

Answer 1

我正在寻找一个答案,并为它写了一个快速的脏jquery处理程序:

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

Answer 2

有一种稍微更清晰的方法来更改不涉及(丑陋的)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>

适当地更换图像的宽度和高度.

Answer 3

它在Firefox等人的工作方式的原因在于,<label>当它有一个指向输入字段的"for"属性(通过"id"值)时应该做的事情.如果它在IE中不起作用,那是因为Microsoft要么以不同的方式解释标准,要么就是无法正确实现它.(我在w3c参考文献中没有看到任何明确的语言,我发现除了标签的文本内容之外,是否应该集中并转移它.)

Answer 4

我还发现,如果你有一个隐藏的输入display:none或者visibility:hidden依赖于标签进行选择,它将无法在ie8中使用.

我的解决方法是overflow:hidden在包含元素上有一个输入并将输入定位在该区域之外.