可點擊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/