html - 您将如何修复这个常见的 IE Z-index 错误的不常见示例?

标签 html css internet-explorer css-float z-index

这似乎是一个已经回答过的常见问题,因为它指的是 well-known z-index bug在 IE7 及更低版本中。然而,这种情况有些特殊;

我正在使用 CSS 下拉菜单,该菜单将嵌套列表用于子菜单。我在其他网站上多次使用过这个,但通常第一层是水平的。在这种情况下,第一级需要是垂直的,子菜单应该飞出而不是下拉。

最重要的是,整个事情很复杂,因为第一层在设计中“环绕”成曲线,菜单 ul float 以适应内部页面上的不同布局。 float 会导致各种明显的解决方案问题,因为如果 z-index 高于页面上的内容,则该内容中的链接会被顶级菜单项覆盖。

无论如何,凭借极大的耐心,我已经让它完美地工作,除了在 IE7 和更低版本中。我遇到的问题是 IE 想要将子菜单放在顶级菜单项的下面(这是 IE 的预期行为,我明白这一点)。但是,由于顶级元素在曲线上,一些弹出菜单最终会被顶级元素重叠。

作为一个公认糟糕的修复方法,我在我的 CSS 中使用了星形 hack 来向弹出菜单添加填充。这使它们发挥作用,但实际上并没有解决问题或看起来很吸引人。

所以,view the site , 如果您有任何想法,请告诉我。谢谢!

最佳答案

您将希望获取顶层的所有 li 并在您向下浏览页面时将它们的 z-index 值逐渐降低。例如,从顶部的“Property Search”开始,分配 z-index 值 99、98、97 等。这样每个 li 的子项(子菜单)都将打开比页面上跟随它们的根元素更高的 z-index 堆栈。

关于html - 您将如何修复这个常见的 IE Z-index 错误的不常见示例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3611194/

相关文章:

javascript - 使用 CSS 将阴影应用于三 Angular 形 SVG

html - CSS 删除线效果,Firefox 问题

CSS强制换行

javascript - 在 Flash 中禁用使用箭头键滚动

css - css添加的引号在Chrome和IE10中显示不同

javascript - 对象预期的 IE8 JS/JQuery 问题 IE8

javascript - JQuery 搜索使用单个搜索框组合文本框和下拉字段

html - CSS子菜单打扰了父级

javascript - 在纯 JavaScript 中交换一个类

html - 尝试在 CodePen 上制作动画淘汰文本渐变