javascript - IE7 Z-index错误顺序

检查这个jsFiddle。
在IE7中，上面jsFiddle中的代码显示了下一个selectbox元素(.sbOptions)下的下拉列表(.sbHolder)。
.sbOptions具有z-index: 100;但仍显示在.sbHolder下。
除了IE7之外，其他浏览器都能正常工作，你知道怎么解决这个问题吗？

最佳答案

IE7中有一个错误：如果不设置z-index，并且只要hasLayout设置为true，就会为定位元素分配堆栈上下文。sbHolder的宽度和高度就是这样的hasLayout触发器。因此，第二个sbHolder在顶部。
IE7将规则更改为：

.sbHolder {
    position: relative;
    width: 130px;
    height: 30px;
    display: block;
    margin-bottom: 20px;
    z-index: 0; /* ! */
}

这将破坏您增加.sbOptions z-index的计划，因为.sbOptions被.sbHolder的不规则堆栈上下文捕获。
我有一个IE开始吧：http://jsfiddle.net/HRubx/
如果需要，现在将生成不规则的堆叠上下文：

li:hover {
    position: relative;
}