【发布时间】：2012-06-06 15:35:14
【问题描述】：
问题
我正在编写一个网页，用户可以在其中单击图像的一部分以触发 Javascript 事件。但是，我发现如果我在 图像 上放置一个绝对定位的 anchor(a) / button(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罢工>
编辑（2012-12-05）：将演示迁移到 jsfiddle。
- Demo4@jsfiddle
-
Demo5@jsfiddle（@Sparky672 建议使用
text-indent）。
详情
我可以在所有浏览器中单击并触发底部的两个警报；但是，前两个 不能在 IE 中触发（请参阅下面的测试结果）。没关系，因为我总是可以提醒自己不要那样写，但是对于为什么会发生这种情况，是否有合理的解释？
附：我尝试在锚/按钮上使用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 |
+-------------------------------------------------------+---------------------------------------+
【问题讨论】：
-
你试过在
.MyButton上使用display:block吗？ -
@Zeta 试过 display:block 和 display:inline-block。没有帮助。
-
HTML 是否使用W3C Validation tool 进行验证？ IE非常对无效的 HTML 很挑剔。
-
锚标签完全为空。
<a>是一个内联元素，所以我看不出它在没有任何内容的情况下如何具有任何大小。 Zeta 的评论应该有助于解决这个问题。但是对于IE，你还需要在里面放文字，然后用大号的负号text-indent隐藏文字。 -
@Sparky672 尝试在
<a>中添加一些文本并设置一个否定的text-indent。<a>仍然无法点击，只要它位于<img>之上（仅在 IE 中）。