带有无序列表的 IE7 z-index

Question

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

http://jsfiddle.net/AEqxT/

如果您在大多数浏览器中查看，您应该会看到两个相邻的绿色列表项，顶部有一个蓝色框或“徽章”，缩小了两者之间的差距。然而，在 IE7 中，蓝色框总是低于第二个 li。我已经尝试了各种方法来解决这个问题。为父 ul 设置更高的 z-index 并没有改变任何东西，如果我在“徽章”上使用 position: relative;，它会失去它的宽度和高度。

我缺少一个明显的解决方法吗？

Answer 1

您可能会在 LI 中与您的徽章斗争，将其从列表中删除，您应该没问题，但位置有点混乱：

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

如果您绝对必须将它与 LI 一起使用，那么您可能需要一些 JS 才能完成这项工作

Answer 2

这是reported IE7 bug。

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

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