html – 无法在IE6或IE9中单击img前面的按钮_html-js-css

概述问题我正在编写一个网页,用户可以点击图像的一部分来触发Javascript事件.但是,我发现如果我在图像(img)上放置一个绝对定位的锚点(a)/按钮(输入类型=按钮),用户就不能在IE(仅)中单击它,即使它位于顶部图片. 演示 <style type="text/css">.MyDiv{ position:relative; left:0px; top:0px; 问题

我正在编写一个网页,用户可以点击图像的一部分来触发Javascript事件.但是,我发现如果我在图像(img)上放置一个绝对定位的锚点(a)/按钮(输入类型=按钮),用户就不能在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

> Demo1(原创)
> Demo2(完整,w3c验证)
> Demo3(完整,w3c验证,@ Sparky672建议使用文本缩进).

编辑(2012-12-05)：迁移演示到Jsfiddle.

> Demo4@jsfiddle
> Demo5@jsfiddle(@ Sparky672建议使用text-indent).

细节

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

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

编辑(2012-06-01)：尝试使用display：block / display：on / 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                                   |+-------------------------------------------------------+---------------------------------------+

解决方法结论

经过更多的研究,这是我的结论.

在this page中,作者在ie8中经历了相同的行为.

在这个SO问题(1663919)中,作者在ie7中经历了相同的行为.

在这些SO问题(1075684,4639921)中,作者在IE中遇到的问题略有不同但类似的情况.

似乎the spec没有提到任何关于这一点,但因为它只发生在IE中,它只发生在锚点/按钮放在图像上时(这不是任何人都不会想到的),我会说这是只是IE中的一个错误.

解决方法

使用下面的任何一个来解决问题：

>不要在图像上放置锚点/按钮.相反,将它放在带有CSS背景图像的div上(如问题中所述).
>在锚点/按钮上设置以下CSS属性,使其在IE中再次可点击(如here所述).