無法在IE6或IE9中單擊img前面的/按鈕

Question

問題

我正在編寫一個網頁，用戶可以點擊圖像的一部分來觸發Javascript事件 。 但是，我發現如果我在圖像 （ img ）上放置一個絕對定位的錨點 （ a ）/ 按鈕 （ input type=button ），用戶就無法在IE中單擊它（僅限），即使它位於頂部圖片。

演示

<style type="text/css">
.MyDiv
{
    position:relative;
    left:0px;
    top:0px;
    width:275px;
    height:95px;
}

.MyDiv .MyImageDiv
{
    position:absolute;
    left:0px;
    top:0px;
    width:275px;
    height:95px;
    background-image:url('https://www.google.com/images/srpr/logo3w.png');
}

.MyDiv .MyButton
{
    position:absolute;
    left:162px;
    top:20px;
    width:53px;
    height:80px;

    display:inline-block;    /* Added based on @Zeta's comment */

    background-color:transparent;
/*    background-color:black;opacity:0.5;*/
    border:0px;
    cursor:pointer;
}
</style>

<!-- Button on image: cannot click in IE. Why? -->
<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>

<!-- Anchor on image: cannot click in IE. Why? -->
<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"></a>
</div>

<hr/>

<!-- Button on div with background-image: no problem -->
<div class='MyDiv'>
    <div class='MyImageDiv'></div>
    <input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>

<!-- Anchor on div with background-image: no problem -->
<div class='MyDiv'>
    <div class='MyImageDiv'></div>
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"></a>
</div>

現場演示

要測試，請單擊小寫字母g in

• 演示1 （原創）
• 演示2 （完整，w3c驗證）
• Demo3 （完整，w3c驗證， text-indent如@ Sparky672所示）。

編輯（2012-12-05）：遷移演示到jsfiddle。

• Demo4 @的jsfiddle
• Demo5 @ jsfiddle （使用@ Sparky672建議的text-indent ）。

細節

我可以在所有瀏覽器中點擊並觸發底部兩個警報; 但是， 前兩個不能在IE中觸發 （參見下面的測試結果）。 沒關系，因為我總能提醒自己不要以這種方式寫作，但對於為什么會發生這種情況有一個明智的解釋嗎？

PS我嘗試在錨點/按鈕上使用z-index ，但它沒有幫助。

編輯（2012-06-01）：嘗試使用display:block / display:inline-block on / display:inline-block on anchor / button（根據@ Zeta的評論），但它沒有幫助。

我也嘗試使用IE9的開發人員工具（F12）來嘗試調試頁面。 如果我使用箭頭工具（Ctrl + B）選擇錨點/按鈕，則無法選擇; 但如果我在開發人員工具的HTML中突出顯示錨點/按鈕元素，它會正確顯示錨點/按鈕的位置和大小。 很奇怪。

檢測結果

+-------------------------------------------------------+---------------------------------------+
|                                                       | Can click on anchor / button on image |
+-------------------------------------------------------+---------------------------------------+
| IE 6.0.2900.2180.xpsp_sp2_gdr.100216-1441, on Windows | **NO**                                |
| IE 9.0.8112.16421, on Windows                         | **NO**                                |
| Opera 11.64, on Windows                               | Yes                                   |
| Opera 12.00, on Windows                               | Yes                                   |
| Opera 12.02, on Windows                               | Yes                                   |
| Opera 12.11, on Windows                               | Yes                                   |
| Opera 11.64, on Mac                                   | Yes                                   |
| Opera 12.00, on Mac                                   | Yes                                   |
| Opera Mini 7.0.4, on iPhone                           | Yes                                   |
| Firefox 12.0, on Windows                              | Yes                                   |
| Firefox 14.0.1, on Windows                            | Yes                                   |
| Firefox 15.0.1, on Windows                            | Yes                                   |
| Firefox 13.0, on Mac                                  | Yes                                   |
| Chrome 19.0.1084.52m, on Windows                      | Yes                                   |
| Chrome 22.0.1229.79 m, on Windows                     | Yes                                   |
| Chrome 23.0.1271.95 m, on Windows                     | Yes                                   |
| Chrome 19.0.1084.54, on Mac                           | Yes                                   |
| Chrome 21.0.1180.82, on iPhone                        | Yes                                   |
| Safari 5.1.5, on Windows                              | Yes                                   |
| Safari 5.1.7 (7534.57.2), on Windows                  | Yes                                   |
| Safari 5.1.7 (7534.57.2), on Mac                      | Yes                                   |
| Safari, on iOS 4.3.5                                  | Yes                                   |
| Browser, on Android 3.1                               | Yes                                   |
+-------------------------------------------------------+---------------------------------------+

Answer 1

結論

經過更多的研究，這是我的結論。

在此頁面中 ，作者在IE8中遇到了相同的行為 。

在這個SO問題（ 1663919 ）中，作者在IE7中經歷了相同的行為 。

在這些做題（ 1075684 ， 4639921 ），作者有略有不同，但類似的場景 在IE中同樣的問題 。

似乎規范沒有提到任何關於這一點，但因為它只發生在IE中，它只發生在錨點/按鈕放在圖像的頂部（這不是任何人都不會想到的），我會說這個只是IE中的一個錯誤。

解決方法

使用下面的任何一個來解決問題：

1. 不要在圖像上放置錨點/按鈕。 相反，將它放在帶有CSS background-image的div上（如問題中所述）。

2. 設置在錨/按鈕 ，這使得它在IE中再次點擊（如規定的下列CSS屬性在這里 ）。

    background-image:url(about:blank) 

Answer 2

這里有一件令人困惑的事情

在前兩個div上，在輸入或標記之前使用img

<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>

<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/></a>
</div>

在其他div上，它只是在輸入之前的div。 有什么理由嗎？

試試這個將img放在標簽內。

<div class='MyDiv'>
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/><img src='https://www.google.com/images/srpr/logo3w.png' /></a>

</div>

<div class='MyDiv'>

    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/><img src='https://www.google.com/images/srpr/logo3w.png' /></a>
</div>