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 hacks或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并将输入放在此区域之外。

Answer 5

我猜我有一个更好的黑客解决方案来解决这个问题。我先解释一下原因。

使用jquery点击标签点击有效，但在使用输入文件时却不行，因为您将收到拒绝访问。

使用css并将图像显示为背景也不是很好，因为你需要有一个具有确切大小的图像，当用户上传图像或者你有很多不同的图像时就不是这种情况尺寸。

好的，我现在解释黑客的想法：

你有一个带有图像的标签，当你点击图像时，IE8不会触发标签。但是如果你在Label中写了一些文字，当你点击IE8文本时会激活标签。

理念是在标签内放置一个跨度，标签的大小（宽度和高度）

好的，但是如果你里面没有文字就行不通，但是如果你改变了背景颜色就可以了。

所以你需要做的是：

放置一个角色大小为标签
写下背景颜色并使其透明
使用相对位置定位Span，将Span精确地放在Label上。

这样做有点困难，但我想它会涵盖更多情况。激活输入类型文件的标签示例：

<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>

我希望它有效并拯救你就像它救了我一样

Answer 6

你确定你不仅仅是在看错字吗？检查＆＃34; ctl00_mainContent_someRadioButton ＆＃34; vs.＆＃34; ctl00_mainContent_somelRadioButton ＆＃34;

Answer 7

看起来IE无法正确处理带有img元素的标签。我能够找到处理此问题的唯一合理方法是using HTML component behaviors，Javascript handlers或CSS hacks。我没有尝试过所有这些，所以我不能保证它们会起作用。

Answer 8

我尝试了这里发布的其他一些解决方案，并最终对其进行了修改，以便解决您的问题。我的问题很相似，虽然HTML看起来有点不同，LABEL标签包含图像和INPUT单选按钮。

我在下面包含的解决方案将确保任何onClick处理程序在单选按钮上正确触发。它也只执行一次，而不是在单选按钮标签正常运行的浏览器中。

这是我用来解决Internet Explorer 11中的问题的jQuery代码：

$('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()。

Answer 9

这适用于我的一组无线电输入，后跟包含图像的标签。基本上使用它而不是在所有浏览器中使用for属性

      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');
        });
     });

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

9 个答案: