可点击IMG包裹标签在IE8

Question

不工作，我有以下的标记和Javascript：

JSFiddle

HTML：

<form method="get" action="some-url-here"> 
<div class="UserFilter"> 
    <ul class="UserFilter"> 
    <li> 
     <label class="Selected" for="1"> 
      <input id="1" type="radio" value="1" name="Profile" /> 
      <img title="User 1" alt="User 1" src="img-url-here" style="width: 50px;height: 50px" /> 
      User 1 
     </label> 
    </li> 
    <li> 
     <label class="Selected" for="2"> 
      <input id="2" type="radio" value="2" name="Profile" /> 
      <img title="User 2" alt="User 2" src="img-url-here" style="width: 50px;height: 50px" /> 
      User 2 
     </label> 
    </li> 
    </ul> 
</div> 
</form> 

的JavaScript：

var labelID; 
$("label img").live("click", function() { 
     labelID = $(this).parent().attr('for'); 
     $('#'+labelID).trigger('click');   
}); 

$('ul.UserFilter input').click(function() { 
     $('ul.UserFilter input:not(:checked)').parent().removeClass("Selected"); 
     $('ul.UserFilter input:checked').parent().addClass("Selected"); 
     //$(this).closest("form").submit();  
}); 

$('input:checked').parent().addClass("Selected"); 

CSS ：

div.UserFilter { 
    background: none repeat scroll 0 0 #EAE5DA; 
    border-bottom: 1px solid #F1EEE6; 
    border-top: 3px solid #0888A5; 
    box-shadow: 0 5px 10px #F1F1F1; 
} 
div.UserFilter ul { 
    display: inline-block; 
} 
ol, ul { 
    list-style: none outside none; 
} 
div.UserFilter ul li label.Selected { 
    background: none repeat scroll 0 0 #0888A5; 
    border: 1px solid #16758B; 
    color: #FFFFFF; 
    text-shadow: 0 1px 0 #16758B; 
} 
div.UserFilter ul li label.Selected { 
    background: none repeat scroll 0 0 #688ABD; 
    border: 1px solid #688ABD; 
    color: #FFFFFF; 
    cursor: pointer; 
    text-shadow: 0 1px 0 #52688A; 
    transition: border-color 0.218s ease 0s; 
} 
div.UserFilter ul li label { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #CCCCCC; 
    border-radius: 2px 2px 2px 2px; 
    display: inline-block; 
    letter-spacing: normal; 
    padding: 0 5.666px 0 0; 
    transition: background 0.218s ease 0s; 
    word-spacing: normal; 
} 

点击文本在选择与之关联的单选按钮时可以很好地工作（在Firefox，Chrome和IE9 +中测试过）。然而，在IE8-，点击图像不选择或火灾的单选按钮的单击事件。任何想法，解决方法或建议都是最受欢迎的。

Answer 1

我喜欢Brad's solution使用<span>与背景图像。这样你就可以摆脱这个问题而不必使用JavaScript。

你的HTML代码变为：

<form method="get" action="some-url-here"> 
<div class="UserFilter"> 
    <ul class="UserFilter"> 
    <li> 
     <label class="Selected" for="1"> 
      <input id="1" type="radio" value="1" name="Profile" /> 
      <span title="User 1" style="background-image: url('img-url-here')width: 50px;height: 50px;display: inline-block;"></span> 
      User 1 
     </label> 
    </li> 
    <li> 
     <label class="Selected" for="2"> 
      <input id="2" type="radio" value="2" name="Profile" /> 
      <span title="User 2" style="background-image: url('img-url-here')width: 50px;height: 50px;display: inline-block;"></span> 
      User 2 
     </label> 
    </li> 
    </ul> 
</div> 
</form> 

中的JavaScript变得更小。您也可以删除$('input:checked').parent().addClass("Selected");行，因为你设置Selected类的标签在HTML代码：

$('ul.UserFilter input').click(function() { 
     $('ul.UserFilter input:not(:checked)').parent().removeClass("Selected"); 
     $('ul.UserFilter input:checked').parent().addClass("Selected"); 
     //$(this).closest("form").submit();  
}); 

的CSS保持不变，除了可以去除div.UserFilter ul li label.Selected选择之一。

一个更新的jsfiddle：http://jsfiddle.net/ft4Hb/1/