問題

在IE11在下面的代碼的圖像是可點擊的激活/切換輸入在標籤不可點擊：圖像標籤在IE11

<label> 
    <input type="checkbox"> some text 
    <img src="http://placeimg.com/100/100/any" alt="some img"> 
</label>

儘管圖像在此完全相同的代碼，但一個<form>的內部無法點擊激活/切換輸入：

<form> 
<label> 
    <input type="checkbox"> some text 
    <img src="http://placeimg.com/100/100/any" alt="some img"> 
</label> 
</form>

（Demo at jsfiddle）

Example

注意的是，在例如動畫在上面，我點擊第二個形象，這是不行的，但是點擊文本作品（只是這樣做是爲了證明）。在Windows 7專業版SP1的64

IE 11.0.9600.16428：

這是測試和複製的。

Windows RT 8.1平板電腦上的IE 11.0.9600.16438。

Windows 7 Pro SP1 x64上的IE 11.0.9600.17105。

IE 11.0.10240.16431上的Windows 10

此問題不會發生在IE9，IE10，微軟邊緣，和其他瀏覽器。

問題：

可這同時仍使用圖像標記來解決不 JS？

如果不是，還有其他可行的解決方案嗎？

（可選）爲什麼第二個示例中的圖像沒有觸發輸入元素（在第一個示例中）？

來源

2013-11-25 Qtax

解決此問題的一種方法是在圖像上使用pointer-events: none，並使用例如display: inline-block調整標籤。（pointer-eventsis supported在IE11）

label{ 
    display: inline-block; 
} 
label img{ 
    pointer-events: none; 
}

（Demo at jsFiddle）

來源

2013-11-26 16:34:16 Qtax

如果使用bootstrap框架，那麼所有具有「img-responsive」類的圖像都將獲得「display：block」樣式。在這種情況下，您需要在'label img' css中添加一行。這應該被添加：'display：inline！important'。 – Timo002

爲什麼'pointer-events：none'修復這個問題？爲什麼圖像的「顯示」屬性很重要？這個答案根本不能解釋實際問題是什麼。 – chiliNUT

@chiliNUT：IE11的錯誤在於，點擊圖片元素不會做它應該做的。通過在圖像上設置「pointer-events：none」，並使標籤元素至少與圖像一樣大，點擊就會在標籤元素上註冊，IE會按照它的設定進行操作。 – Qtax

是一個年紀大一點的問題，但由於其在谷歌的搜索相當高的，我會在這裏發佈一個更答案修復此在所有IE版本。

。

複選框/收音機必須外標籤，它必須有自己獨特的標識和標籤必須有屬性爲包含複選框/收音機的ID及其相關：

<label for="my_lovely_checkbox">Hello good friend</label> 
<input type="checkbox" value="Hello" id="my_lovely_checkbox">

如果你這樣做了，如果你使用PHP（你可能是），你可以使用這段代碼：

if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) { 
    ?> 
    <script> 
     $(document).ready(function() { 
      $("label img").on("click", function() { 
       $("#" + $(this).parents("label").attr("for")).click(); 
      }); 
     }); 
    </script> 
    <? 
}

我知道它的JS，但實際上沒有其他修復了=< IE10沒有JS用法。它檢測所有的IE版本（包括IE10和11，不知道關於Spartan tho，我認爲它沒有檢測到那個）。

Ps .:上面的回答實際上並不適用於IE8，IE9和IE10。就這樣你知道。

來源

2015-04-10 19:14:10 MiChAeLoKGB

當我測試時，這個錯誤在IE10中不存在，正如我在問題中寫的。你是說IE10也有這個bug？演示？ – Qtax

@Qtax它仍然存在。我現在在Chrome和IE10上試過了。在Chrome中工作，不在IE10中：http://jsfiddle.net/v4rz346s/但是您必須將IE設置爲邊緣，而不是IE 10（在F12 - >仿真菜單中）。問題是，邊緣被設置爲默認值，所以除非用戶改變IE10，否則它將不起作用。 – MiChAeLoKGB

在IE10（虛擬機中的真實IE10）中測試了您的（以及我的原創）示例，只需點擊圖片即可。那裏沒有錯誤。所以你可能在測試中做錯了什麼。 – Qtax

圖像標籤在IE11

問題

問題：

回答

相關問題