【问题标题】:Hover Dropdown Menu Z-Index Issue in IE7IE7 中的悬停下拉菜单 Z-Index 问题
【发布时间】:2012-09-22 19:38:52
【问题描述】:

我正在为我们的一个应用程序制作一个页面,该页面显示了一个大数据表以及一个带有对每个项目执行的选项的下拉列表。您可以在(链接已删除,问题已解决)查看我的项目的简化版本。

这是我的问题:每行上的下拉菜单是绝对定位的,每个都有一个 600 的 z-index。悬停时我将 z-index 增加到 900,这样当它打开时它可以出现在顶部在它正下方的行中的下拉菜单。我怀疑这种悬停状态在 IE7 中没有生效,并且下拉列表总是出现在下一行的下拉列表下方(仅在 IE7 中)。

接下来,我尝试将第一行的下拉菜单的 z-index 设为 699,将第二行的下拉菜单的 z-index 设为 698,第三行的 z-index 设为 697 等等,这样每个下拉菜单都将高于下面的它。这也不起作用,当打开下拉菜单时,下拉菜单仍然出现在下一行的下拉菜单下方。

我知道通过给父元素一个更高的 z-index 可以修复 IE7 z-index 问题,实际上我确实在同一页面上的另一个菜单中使用了这种方法(但它不在这个演示页面中)它为此目的工作得很好。但是,我尝试为这些下拉列表的父级提供 999 的 z-index(当然,位置:相对),但我仍然没有运气在页面上获得正确的堆叠顺序。这让我发疯,我真的需要完成这个项目,这是我们启动之前唯一不能正常工作的事情。真的很讨厌支持 IE7,但必须这样做,而且我知道这必须是可能的。拜托,我真的很感激任何人可以为我提供的任何帮助。我觉得我已经用尽了所有的可能性,但希望有人知道如何做到这一点。

【问题讨论】:

    标签: css internet-explorer-7 drop-down-menu z-index


    【解决方案1】:

    尝试为父元素的父元素指定 z-index,然后继续返回,直到您到达共享的父元素以显示未正确显示的元素。

    【讨论】:

    • 感谢您的建议。我发现我实际上需要在下拉列表的直接父级上有一个 Z-Index,每行减少 1。因此,第一行的下拉容器的 z-index 为 999,其中的下拉列表的 z-index 为 699。在下一行中,下拉容器的 z-index 为 998,下拉列表的 z-index 为698,然后是 997 和 697,以此类推。每行两个对象的 z-index 都必须减 1。
    【解决方案2】:

    对我来说

    body {
    z-index: -1;
    }
    
    ul li{z-index: 999;}
    

    【讨论】:

      猜你喜欢
      • 2011-10-21
      • 1970-01-01
      • 1970-01-01
      • 2011-09-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-09-19
      相关资源
      最近更新 更多