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

发布于 2024-09-16 17:09:10 字数 731 浏览 10 评论 0原文

这似乎是一个已经得到解答的常见问题,因为它引用了 IE7 及更低版本中众所周知的 z-index 错误。然而,这种情况有些特殊;

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

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

不管怎样,凭借极大的耐心,我已经让它完美地工作了,除了 IE7 及更低版本。我遇到的问题是 IE 想要将子菜单放在顶级菜单项下面(这是 IE 的预期行为,我理解这一点)。但是,由于顶级项目位于曲线上,因此某些弹出菜单最终会被顶级项目重叠。

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

因此,查看该网站,如果您有任何想法,请告诉我。谢谢!

This may appear to be a common question that has already been answered because it refers to the well-known z-index bug in IE7 and lower. However, this situation is somewhat unique;

I am using a CSS dropdown menu that uses nested lists for sub menus. I have used this many times on other sites, but usually with the first level being horizontal. In this case, the first level needs to be vertical and the sub menus should fly out rather than drop down.

On top of that, the whole thing is complicated because the first level "wraps" to a curve in the design and the menu ul floats to accommodate a different layout on internal pages. The floating causes all kinds of problems with apparent solutions, because if the z-index is higher than the content on the page, the links in that content are covered by top level menu items.

Anyway, with a lot of patience I've gotten it to work perfectly, except in IE7 and lower. The problem I'm having is that IE wants to put the sub-menus underneath the top level menu items (This is the expected behavior for IE, I understand that). But, since the top level items are on a curve, some of the flyout menus end up being overlapped by top level items.

As an, admittedly awful, fix, I used the star hack in my CSS to add padding to the flyout menus. This makes them functional, but doesn't actually address the issue or look appealing.

So, view the site, and let me know if you have any ideas. Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

时光清浅 2024-09-23 17:09:10

您将需要获取顶层的所有 li 并在向下浏览页面时将其 z-index 值逐渐降低。例如,从顶部“属性搜索”开始,指定 z-index 值 99、98、97 等。这应该使得每个 li 的子项目(子菜单)将打开比页面上跟随它们的根项目更高的 z-index 堆栈。

You will want to take all the li at the top level and set their z-index values incrementally lower as you go down the page. For instance, starting from the top "Property Search", assign z-index values of 99, 98, 97, etc. This should make it so the child items (submenus) of each li will be on a higher z-index stack than the root items following them on the page.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文