带有无序列表的IE7 z-index

Question

以下示例是我的顶部导航的简化版本。

http://jsfiddle.net/AEqxT/

如果您在大多数浏览器中查看，您应该看到彼此相邻的两个绿色列表项目，顶部有一个蓝色框或“徽章”，弥合了两者之间的差距。然而，在IE7中，蓝色框总是低于第二个li。我已经尝试过各种修复方法。将更高的z-index设置为父级ul并没有改变任何内容，如果我在'badge'上使用position: relative;，则会丢失其宽度和高度。

是否有一个明显的解决方法，我错过了？

Answer 1

你可能会对你的徽章挣扎，把它从列表中拿出来，你应该没问题，但是有点搞乱位置：

http://jsfiddle.net/AEqxT/2/

如果你绝对必须使用LI，那么你可能必须有一些JS来完成这项工作

Answer 2

这是reported IE7 bug。

您可以使用发布到this question的JS解决方案来修复它，或者您可以手动为所有<li>元素设置不同的z索引，从高值到低值排序：

http://jsfiddle.net/AEqxT/3/