图像链接上的隐形DIV无法在IE 8/9/10中运行

Question

我的页面上有一个图像，我将不可见的DIVS置于图像上方以允许某些框可以点击。这是我的意思的一个例子： http://jsfiddle.net/FxNYJ/

这适用于Chrome，Firefox，Opera，Safari。它似乎在IE 8,9和10中不起作用。我以前不习惯使用这种技术时遇到这个问题。有没有人有任何想法？

HTML：

<div class="main-image-wrap">
    <a id="bannerlink_selfie_create" href="http://google.com" target="_blank" class="overlay-link" style="width:28%;height:10%;top:71%;left:20%;"></a>
    <a id="bannerlink_selfie_join" data-toggle="modal" href="http://google.ca" target="_blank" class="join-link overlay-link" style="width:13%;height:4%;top:89%;left:32%;"></a>
    <img class="main-image" src`="http://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif" alt="">
</div>

CSS：

.overlay-link {
    border: 1px solid red;
    display: block;
    position: absolute;
    z-index: 100;
}