我需要在背景图像中单击一个区域以生成一个JavaScript使用的事件.所以,我创建了一个锚标签,在里面我插入了一些语义无意义的标签之间的相关文本然后我隐藏了:

<a href="#"><i>foo</i></a>

然后我给了锚标签'display:block'属性,宽度和高度值,并且绝对定位在我需要它与背景图像相关的位置.在Firefox中这很好用 - 我将鼠标悬停在上面,我的光标按预期变化 - 我有点可点击的东西.但是,IE7不喜欢锚标记为"空"的事实,因此不会将其视为可点击.所以我把它添加到css中的锚标签:

background:url(/no-image.jpg); 

...这似乎愚弄IE7,假设有东西存在.IE7现在将该区域视为可点击,即使锚标签实际上不存在背景图像.但这对我来说似乎有些黑客,我想知道是否有一种更优雅的方式来解决这个问题.任何想法将不胜感激.谢谢.

问题

我正在编写一个网页,用户可以点击图像的一部分来触发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' …