无法在IE6或IE9中单击img前面的/按钮

Question

问题

我正在编写一个网页,用户可以点击图像的一部分来触发Javascript事件.然而,我发现,如果我把一个绝对定位锚(a)/ 按钮(input type=button)的对像(img),用户不能点击它在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(text-indent由@ Sparky672建议).

细节

我可以在所有浏览器中点击并触发底部两个警报; 但是,前两个不能在IE中触发(参见下面的测试结果).没关系,因为我总能提醒自己不要以这种方式写作,但对于为什么会发生这种情况有一个明智的解释吗？

PS我尝试使用z-index锚点/按钮,但它没有帮助.

编辑(2012-06-01):尝试使用display:block/ display:inline-block在锚点/按钮上(根据@ 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. 不要在图像上放置锚点/按钮.相反,将它放在div带有CSS的background-image(如问题中所述).

2. 设置以下CSS属性的锚/按钮,这使得它在IE中再次点击(为说明这里).

   background-image:url(about:blank)