我有一个绝对位于图像顶部的两个锚点,这些链接可以在其他浏览器(Chrome,FF,Safari)中点击,但不能在IE中点击(到目前为止在8和9中测试)

奇怪的是,如果我给链接一个background-color可点击的,但是如果background-color设置为transparent(这是我想要的)它们不再可点击,我也尝试过设置zoom:1但没有运气.我猜hasLayoutIE中的位消失了IE 8/9所以猜测zoom现在对于这类问题并不重要.

任何想要制作这些链接的想法都会在IE 8/9中以透明的bg显示出来吗？

这是我一直在使用的小提琴:jsFiddle示例

我有以下HTML布局:

<div id="content">
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />

    <div id="countdown"></div>

    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

和CSS:

body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}

我想要一个具有特定高度和宽度的锚.

它上面没有文字,因为它意味着要放在页面的某个区域之前.

这是代码:

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"></a>

除了IE6和IE7之外,它在所有方面都运行良好.如果我添加边框,我可以看到锚具有正确的大小,但如果我尝试单击它,则只有顶部可以单击.

我不知道为什么会这样做.我尝试添加一个onclick,即使有警报,同样的事情,单击锚的底部是不可能的.

这真的很奇怪,之前有没有发生过这种事？一切都会有所帮助.

问题

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