带有 CSS 控制的下拉菜单的 IE8 问题答案

【问题标题】：IE8 Issue with CSS-Controlled Dropdown Menus带有 CSS 控制的下拉菜单的 IE8 问题
【发布时间】：2013-06-21 04:15:17
【问题描述】：

我创建了一个网站，并在其中构建了一个 3 级下拉菜单。到目前为止，我测试过的所有浏览器都运行良好，除了 IE8。在 IE8 中，当您将鼠标悬停在最高级别的按钮上时，会出现下拉菜单。当您将鼠标悬停在其下有子页面的任何辅助页面上时，菜单应该出现在父页面的右侧，并且在 Chrome、Firefox、Safari 和 IE9+ 中会这样做。

我希望有人可以查看该网站，如果您有任何想法，请告诉我。

http://sightlines.quantumdynamix.net/

将鼠标悬停在“我们是谁”和“我们的团队”上应该有一个三级菜单，但它不会在 IE8 中显示。

这是显示三级菜单的 CSS：

#mainNavContainer .sub-menu li:hover > div > .sub-menu {
        display: block;
}

这里是菜单代码（因为您不需要整个菜单，所以将其删减）。抱歉，课程数量众多，但它是 Wordpress 菜单。

<div id="mainNavContainer">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
            <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first has_children menu-item-72">
                <a href="/who-we-are/">Who We Are</a>
                <div class="sub-menu-container">
                    <ul class="sub-menu">
                        <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
                            <a href="/who-we-are/our-story/">Our Story</a>
                        </li>
                        <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page has_children menu-item-74">
                            <a href="/who-we-are/our-team/">Our Team</a>
                            <div class="sub-menu-container">
                                <ul class="sub-menu">
                                    <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
                                        <a href="/who-we-are/our-team/executive-team/">Executive Team</a>
                                    </li>
                                    <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                                        <a href="/who-we-are/our-team/leadership-team/">Leadership Team</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

这是正在发生的事情的屏幕截图。蓝色框是从 IE8 的 Dev Tools 生成的，表示浏览器确实知道子菜单应该在哪里，但是当我将鼠标悬停在 Our Team 上时它不显示。

【问题讨论】：

这里似乎一切正常。
在 ie8 中，您看到的是三级菜单？我正在通过 Spoon.net（我们通常在这里用来测试旧版浏览器）运行 ie8，但它不适用于我或办公室中的其他任何人。
使用Document Mode: IE8 Standards 使用IE 浏览器进行测试。要更改Document Mode，只需在浏览器打开时按F12。 “Web 浏览器模拟器”不一致。
在过去，我发现在 IE8 标准模式下的 IE10 和仍然安装了 IE8 的计算机之间的情况有所不同。这就是我们一直使用 Spoon.net 服务的原因。它似乎非常准确地模拟了软件版本。
事实证明这是我使用的 ie8 阴影 CSS 的问题。它将 .sub-menu 和 .sub-menu .sub-menu 上的许多样式添加到与投影过滤器相同的行中。为了解决这个问题，我们刚刚决定 ie8 用户不能在菜单上添加阴影等好东西。

标签： css drop-down-menu cross-browser

【解决方案1】：

这个 CSS 是导致错误的行：

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444);

当我在 IE8 的开发工具中查看该站点时，该行如下所示：

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444); BORDER-LEFT: #d5d5d5 1px solid

现在我已经对此进行了更改，我无法返回完整列表，但最初除了 BORDER-LEFT 之外的许多其他样式出现在过滤器行中。

我不确定过滤器中的什么导致了错误，但我们决定为 ie8 或更早的用户取消阴影，因此删除过滤器行修复了所有问题。

【讨论】：

【解决方案2】：

我不能使用Spoon.net——这是一项付费服务——但试试这个：

#mainNavContainer .sub-menu li:hover > div > .sub-menu:hover {
    display: block;
}

请尝试描述您的问题。

【讨论】：

我添加了一个链接，指向原始帖子中发生的事情的屏幕截图。我还没有发布照片的必要声誉。我尝试了这个 CSS，但它不起作用。
是的（我编辑了我的评论以包括它不起作用，但我这样做可能太慢了）。我尝试了那个 CSS，但它并没有导致网站的功能有任何不同（注释掉原始样式并添加您的样式）。
我需要更多 CSS。当您悬停Our Team 的元素时，会发生什么？请给我看一些 CSS。尝试用JSFiddle.net来说明问题。