图片标签不以点击标签内作出反应IE7

在一个简单的设置与图像：图片标签不以点击标签内作出反应IE7

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

点击影像控制的复选框，就像上的文字点击在标签上或点击复选框本身，在大部分浏览器中。这在IE7中不起作用并不特别让我感到意外，但我想知道是否有一些奇怪的IE方式使得它在该浏览器中可以正常工作。

假编辑嗯显然它不能在IE8中工作。

来源

2011-12-05 Pointy

你试过把标签输入之前，看看这有什么影响？ – 2011-12-05 23:06:14

那么标签的文字工作正常;它只是不响应点击的''。而且我确实希望标签遵循输入。（我在jsfiddle中尝试了它，并且它无法正常工作:-) – Pointy

一点点谷歌搜索告诉我，至少从2005年起，这一直是个问题：http://snook.ca/archives/javascript/using_images_as他确实在三行JQuery中做了最后的更新。 – 2011-12-05 23:15:43

正如评论中所述，IE不喜欢这个想法。解决这个问题的唯一方法是使用一些Javascript - 这里有一个使用JQuery的例子。

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

请参阅http://snook.ca/archives/javascript/using_images_as对此进行讨论。

来源

2011-12-05 23:24:48

有点粗糙和准备，但没有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>

可以改进，但作为一种解决方法相当具有弹性。

来源

2013-07-12 13:41:53 GlennG

或者，您可以将绝对定位的div放在标签的整个宽度和高度上。不过，请注意，你必须使用IE浏览器的不透明度滤波器，使盖格看不见的，因为能见度：隐藏它完全被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>

来源

2013-08-13 15:28:11 Dan

图片标签不以点击标签内作出反应IE7

回答

相关问题