IE/：悬停效果的 z 索引错误
我仅使用 CSS 构建悬停效果。除了 IE7 之外，它在所有浏览器中都可以正常工作。
据我了解，这是因为：
在 Internet Explorer 版本 6 和 7 中，对于定位元素包含的任何元素，z 索引元素的堆叠顺序本质上是“重置”的，无论容器（或父级）是否具有 z-索引值设置。换句话说，如果 z-index 值为 100 的元素包含在定位父元素中，而 z-index 值为 1 的元素则不包含，则该元素将出现在 z-index 值为 1 的元素下方。这是 z-index 属性的不正确实现，显然已在 IE8 中得到纠正。
但是我该如何修复这个 IE7 错误呢？
i build an hover-effect using CSS only. It works fine in all browsers except IE7.
Visit the page or view a screenshot.
As i read, it's because:
In Internet Explorer versions 6 and 7, the stacking order of z-indexed elements is essentially “reset” for any elements that are contained by a positioned element, regardless of wether or not the container (or parent) has a z-index value set. In other words, an element with a z-index value of 100 will appear underneath an element with a z-index value of 1 if the former element is contained by a positioned parent, and the latter is not. This is an incorrrect implementation of the z-index property that has evidently been corrected in IE8.
But how can i fix this IE7-bug?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为您可能需要“z-index”而不是“zIndex”。我从未见过或使用过“zIndex”字符串。但是，我不确定这是否能解决您的问题。
I think you may want "z-index" instead of "zIndex." I've never seen or used the "zIndex" string. However, I am not sure if this will fix your problem.
尝试将
position:relative;添加到您的样式中。 ie7 的 z-index bug 非常流行。这是一个链接，解释了更多相关信息。Try adding
position:relative;to your style. z-index bug for ie7 is pretty popular. Here is a link that explains more about it.