在IE10中定位绝对和z-index

Question

有点奇怪,我试图在图像上叠加几个链接,只在IE(所有版本)中显示它们在图像后面.适用于Chrome,Firefox等.

我已经尝试给每个元素一个合适的z-index,但它实际上没有任何区别.

我发誓我之前已经完成了这么多次问题.

这是一个JSFiddle:http: //jsfiddle.net/SY8xp/

<a href="#" class="logo-link-a"><span>Link 1</span></a>
<a href="#" class="logo-link-b"><span>Link 2</span></a>
<img src="http://lorempixel.com/212/43" width="212" height="43" alt="" id="logo" />

.logo-link-a span, .logo-link-b span {
    display: none;
}

.logo-link-a {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    margin: 25px 0px 0px 0px;
}

.logo-link-b {
    display: block;
    position: absolute;
    width: 165px;
    height: 50px;
    margin: 25px 0px 0px 50px;
}

#logo {
    margin-top: 30px;
}

Answer 1

一个hackish解决方案是为<a />元素添加背景颜色.将此添加到您的jsfiddle的CSS工作:

.logo-link-a, logo-link-b {
    background-color: rgba(255,255,255,0);
}