可點擊標籤在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

它在Firefox等中的工作方式的原因在於，<label>在獲取指向輸入字段的「for」屬性（按「id」值）時應該這樣做。如果它在IE中不能以這種方式工作，那是因爲微軟要麼以不同的方式解釋標準，要麼僅僅是沒有正確實施標準。 （我在w3c參考文獻中沒有看到任何明確的語言，我發現規定標籤的文本內容除了文本內容之外是否應該關注並傳輸它。）

Answer 2

它看起來像IE不能正確處理具有img元素的標籤在他們中。我能夠找到的解決此問題的唯一合理方法是using HTML component behaviors,Javascript handlers或CSS hacks。我沒有嘗試所有這些，所以我不能保證他們會工作。

Answer 3

我一直在尋找一個答案，並寫了它一個快速骯髒的jQuery處理程序：

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

Answer 4

有一個稍微乾淨改變，不涉及（醜）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 5

你確定你不是簡單地看着一個錯字嗎？ 檢查「ctl00_mainContent_someRadioButton」與「ctl00_mainContent_somelRadioButton」

Answer 6

我想我對這個問題的一個更好的解決方案破解。 我會解釋第一個爲什麼。

使用jquery命中標籤單擊作品，但不是當您使用輸入文件時，因爲您將收到訪問被拒絕。

使用css並將圖像作爲背景顯示它不太好，因爲您需要具有完全大小的圖像，當用戶上傳圖像時您不需要這樣做，或者您有大量圖像不同的尺寸。

OK現在I'll解釋了黑客的念頭：

你有一個標籤裏面的圖像，當你點擊圖像，IE8 doesn't火標籤。但是，如果您在標籤中寫入一些文本，則當您單擊文本IE8時會觸發該標籤。

的想法是把跨度標籤內，與標籤的尺寸（寬度和高度）

好了，但如果你沒有必要的文字裏面不需額外的工作，但如果你改變它的工作背景顏色。

所以，你需要做的是：

1. 放置一個跨度的標籤
2. 的作用大小用相對位置放撰寫背景顏色，並使其透明
3. 位置跨度跨度完全在標籤上。

這樣做有點難，但我想它會覆蓋更多的情況。 一個標籤發射的輸入類型文件的示例：

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

我還發現，如果你有display:none或隱藏輸入visibility:hidden並依靠標籤進行選擇，它不會在ie8中工作。

我的解決方法是在包含元素上有一個overflow:hidden並將輸入定位在此區域之外。

Answer 8

我嘗試了一些其他的解決方案發布在這裏，並最終修改它們以得到一個工作修復您的問題。我的問題是類似的，雖然HTML看起來有點不同，用LABEL標籤包裝圖像和INPUT單選按鈕。

我在下面包含的解決方案將確保任何onClick處理程序在單選按鈕本身上正確激發。它也只做一次，而不是在單選按鈕標籤行爲正常的瀏覽器中。

這是jQuery代碼我用來解決在Internet Explorer 11中的問題：

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

這對我有一組無線電輸入，後面是含有圖像的標籤。基本上使用它而不是在所有瀏覽器中使用屬性

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