带有无序列表的 IE7 z-index
以下示例是我的顶部导航的非常简化的版本。
如果您在大多数浏览器中查看，您应该会看到两个绿色列表项彼此相邻，顶部有一个蓝色盒子或“徽章”，弥合了两者之间的间隙。然而，在 IE7 中，蓝色框始终位于第二个 li 下方。我已经尝试了各种修复方法。为父 ul 设置更高的 z-index 不会改变任何内容，如果我在“徽章”上使用 position:relative;，它就会失去其宽度和高度。
我是否缺少一个明显的解决方案？
The following example is a very simplified version of my top navigation.
If you look in most browsers, you should see two green list items next to eachother, with a blue box or 'badge' sitting on top, bridging the gap between the two. In IE7 however, the blue box always falls below the second li. I've tried all manner of fixes to this. Setting a higher z-index to the parent ul didn't change anything, and if I use position: relative; on the 'badge', it loses its width and height.
Is there an obvious fix to this that I am missing?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可能会在 LI 中遇到徽章问题，将其从列表中取出，应该没问题，只是位置有点混乱：
http://jsfiddle.net/AEqxT/2/
如果你绝对必须将其与 LI 结合在一起，那么你可能需要一些 JS 才能完成这项工作
You'll probably struggle with your badge in with the LI, take it out of the list and you should be ok, with a bit of messing with position:
http://jsfiddle.net/AEqxT/2/
If you absolutely have to have it in with the LI, then you'll probably have to have some JS to make this work
这是报告的 IE7 错误。
您可以使用发布到此问题的JS解决方案来修复它，或者您可以手动为所有
元素设置不同的 z 索引，从高值到低值排序：http://jsfiddle.net/AEqxT/3/
This is a reported IE7 bug.
You could fix it with the JS solution posted to this question, or you could manually set different z-indexes to all
<li>element, ordered from high to low values:http://jsfiddle.net/AEqxT/3/