“：悬停以更改z-index”在IE8中无效

Question

我创建了一堆div标签，并使用z-index使它们显示在彼此之后。

它们重叠得足以使它们全部可见且鼠标难以置信。然后我分配了一个：悬停来改变z-index并使正在悬停的div标签到达堆顶部。

我所拥有的一个例子......

CSS

#red-box {
position:fixed;
width:170px;
height:210px;
margin-left:70px;
top:40px;
background-color:red;
z-index:3;
}

#red-box:hover {
z-index:5;
}


#blue-box{
position:fixed;
width:170px;
height:210px;
margin-left:150px;
top:70px;
background-color:blue;
z-index:2;
}

#blue-box:hover{
z-index:5;
}

HTML

<a id="red-box"></a>
<a id="blue-box"></a>

我还创建了一个jsFiddle来帮助突出显示正在发生的事情。

这在所有浏览器的最新版本中都很有用，但是在IE8中div标签的z-index不会改变。

有人可以帮我解决吗？

Answer 1

这应该解决它： http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

基本上，只需将其设置为一个非常高的数字。

编辑：我刚刚在你的JSFiddle的IE版本中对此进行了测试，但它确实有效。