[英]Cannot click a/button in front of img in IE6 or IE9
I am writing a web page where the user can click on part of an image to trigger a Javascript event . 我正在编写一个网页,用户可以点击图像的一部分来触发Javascript事件 。 However, I found out that if I put an absolutely-positioned anchor (
a
) / button ( input type=button
) on an image ( img
), the user cannot click it in IE (only), even if it is on top of the image. 但是,我发现如果我在图像 (
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>
To test, click on small letter g in 要测试,请单击小写字母g in
text-indent
as suggested by @Sparky672).
text-indent
如@ Sparky672所示)。
EDIT (2012-12-05): Migrated demos to jsfiddle. 编辑(2012-12-05):迁移演示到jsfiddle。
text-indent
as suggested by @Sparky672). text-indent
)。 I can click and trigger the bottom two alerts in all browsers; 我可以在所有浏览器中点击并触发底部两个警报; however, the first two CANNOT be triggered in IE (see test results below).
但是, 前两个不能在IE中触发 (参见下面的测试结果)。 It is ok because I can always remind myself not to write in that way, but is there a sensible explanation as for why this is happening?
没关系,因为我总能提醒自己不要以这种方式写作,但对于为什么会发生这种情况有一个明智的解释吗?
PS I tried using z-index
on the anchor / button, but it didn't help. PS我尝试在锚点/按钮上使用
z-index
,但它没有帮助。
EDIT (2012-06-01): Tried using display:block
/ display:inline-block
on the anchor / button (as per @Zeta's comment), but it didn't help. 编辑(2012-06-01):尝试使用
display:block
/ display:inline-block
on / display:inline-block
on anchor / button(根据@ Zeta的评论),但它没有帮助。
I also tried using IE9's Developer Tools (F12) to try to debug the page. 我也尝试使用IE9的开发人员工具(F12)来尝试调试页面。 If I use the arrow tool (Ctrl+B) to select the anchor / button, it cannot be selected;
如果我使用箭头工具(Ctrl + B)选择锚点/按钮,则无法选择; but if I highlight the anchor / button element in the HTML of the Developer Tools, it correctly shows the position and size of the anchor / button.
但如果我在开发人员工具的HTML中突出显示锚点/按钮元素,它会正确显示锚点/按钮的位置和大小。 Strange enough.
很奇怪。
+-------------------------------------------------------+---------------------------------------+
| | 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 |
+-------------------------------------------------------+---------------------------------------+
Here's my conclusion after a lot more research. 经过更多的研究,这是我的结论。
In this page , the author experienced the same behaviour in IE8 . 在此页面中 ,作者在IE8中遇到了相同的行为 。
In this SO question ( 1663919 ), the author experienced the same behaviour in IE7 . 在这个SO问题( 1663919 )中,作者在IE7中经历了相同的行为 。
In these SO questions ( 1075684 , 4639921 ), the authors have the same problems in IE in slightly different but similar scenarios . 在这些做题( 1075684 , 4639921 ),作者有略有不同,但类似的场景 在IE中同样的问题 。
It seems that the spec does not mention anything about that, but since it only happens in IE and it only happens when the anchor / button is put on top of an image (which isn't quite anyone would expect), I would say this is just a bug in IE. 似乎规范没有提到任何关于这一点,但因为它只发生在IE中,它只发生在锚点/按钮放在图像的顶部(这不是任何人都不会想到的),我会说这个只是IE中的一个错误。
Use any one below to workaround the problem: 使用下面的任何一个来解决问题:
Do not put an anchor / button on an image. 不要在图像上放置锚点/按钮。 Instead, put it on a
div
with a CSS background-image
(as stated in the Question). 相反,将它放在带有CSS
background-image
的div
上(如问题中所述)。
Set the following CSS property on the anchor / button , which makes it clickable again in IE (as stated here ). 设置在锚/按钮 ,这使得它在IE中再次点击(如规定的下列CSS属性在这里 )。
background-image:url(about:blank)
There is one thing that is confusing here 这里有一件令人困惑的事情
On the first two divs you use img before either input or a tags 在前两个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>
On the other divs, it's just divs before the inputs. 在其他div上,它只是在输入之前的div。 Any reason for this?
有什么理由吗?
Try this putting the img inside the a tag. 试试这个将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.