我有一个页面使用<ul>列表进行导航(Javascript更改了样式以使其显示或者不在鼠标悬停时显示)。

当我在页面上有Google Map时，这对我来说工作正常，但在IE6和IE7中除外。

在这种情况下，下拉列表根本不起作用。但是，该页面仍可在FireFox 2中使用。

我做了一些研究，发现这可能是IE Select Box Bug的一个例子，但是我不确定，因为Google Map似乎使用的是<div>而不是<iframe>。 。

是否有其他人遇到过与此类似的问题，如果是，他们是否有解决此问题的最佳方法的建议？

解决方案

回答

我没有一个即时的答案，但是此答案中提到的工具(尤其是IE DOM Inspector)可能会有所帮助。

回答

我不知道这是否可以解决问题，但是我们可能想在ccsplay.co.uk上尝试此解决方案，该解决方案可以解决下拉列表下方显示的菜单问题。我不知道它是否可以肯定地工作，但是值得一试。

回答

我使用此jQuery修复了类似的问题，即下拉列表未出现在IE6 / IE7 / IE8中的Flash电影上：

$(function () {
  $("#primary-nav").appendTo("#footer");
});

其中" primary-nav"是下拉容器元素的" ID"，" footer"是页面上最后一个元素的" ID"。然后，我使用绝对定位将下拉菜单重新定位到它们所属的顶部。

之所以起作用，是因为IE比" z-index"更重视源顺序。但是，它仍然无法显示在Windows Media Player插件的上方。

回答

我相信这可能是由于Active 6 IE 6+用来解析CSS所致。

随着时间的流逝，我不得不调整自己的工作以在CSS上包含一些IE hack，以使其与多种浏览器兼容。

我将首先尝试使用纯CSS并包括我提到的技巧来制作不带Javascript的菜单。这可能会解决问题。我们实际上不需要Javascript即可在鼠标悬停或者类似情况下更改样式。

如果我们想了解有关CSS黑客攻击的信息：请单击此处

如果我们想查看一些纯CSS菜单示例：请单击此处

希望这可以帮助！

回答

根据这个谷歌地图线程，你是正确的谷歌代码插入的iframe。

我们需要使用Dan提到的解决方案，

you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists

或者，请参阅Internet Explorer HACK /修复通过DIV显示的选择框。

基本上，解决方案是使用JavaScript将CSS菜单放在IE6的IFrame中。

另一种解决方案是在下拉CSS菜单时使用JavaScript隐藏Google Map，或者在下拉CSS菜单时使用静态地图(甚至Google静态地图)替换Google Map。