问题
我正在编写一个网页，用户可以在其中单击图像的一部分来触发 Javascript 事件。但是，我发现如果我在图像( ) 上放置一个绝对定位的锚点( a) /按钮( )，即使它位于图像顶部，用户也无法（仅）在IE中单击它。input type=buttonimg
演示
<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
编辑（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 |
+-------------------------------------------------------+---------------------------------------+