html - IE10 中的绝对位置和 z 索引

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

一个黑客解决方案是向 <a /> 添加背景颜色元素。将其添加到 jsfiddle 的 CSS 中有效:

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