当页面包含 Google 地图时修复 IE7 中 CSS/JS 下拉列表的最佳方法

Question

我有一个页面使用 <ul> 导航列表（Javascript 更改鼠标悬停时显示或不显示的样式）。

这对我来说效果很好 除了 在 IE6 和 IE7 中，当我的页面上有 Google 地图时。

在这种情况下，下拉菜单根本不起作用。不过，该页面在 FireFox 2 中仍然可以工作。

我做了一些研究，发现这可能是 IE 选择框错误的一个例子，但我不确定，因为谷歌地图似乎正在使用 <div>, ，不是一个 <iframe>.

有没有其他人遇到过类似的问题，如果有的话，他们对解决这个问题的最佳方法有什么建议吗？

Answer 1

我不知道这是否能解决您的问题，但您可能想尝试 此解决方案位于 ccsplay.co.uk 这解决了菜单出现在下拉列表下方的问题。我不知道它是否一定有效，但值得一试。

Answer 2

我使用此解决了类似的问题，即 IE6/IE7/IE8 中的 Flash 电影上没有出现下拉菜单 jQuery:

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

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

这样做的原因是 IE 更尊重源排序而不是 z-index. 。但它仍然无法在 Windows Media Player 插件之上显示。

Answer 3

我相信这可能是因为 IE 6+ 使用 Active-X 来解析 CSS。

随着时间的推移，我不得不调整我的工作，在我的 CSS 中包含一些 IE hack，以便它与多个浏览器兼容。

我首先尝试制作一个没有 Javascript 的菜单，使用纯 CSS 并包括我提到的技巧。它可能会解决你的问题。实际上，您并不需要 Javascript 来更改鼠标悬停时的样式以及类似的内容。

如果你想了解 CSS hacking 是关于什么的：点击 这里

如果你想查看一些纯 CSS 菜单示例：点击 这里

希望这可以帮助！

Answer 4

根据 这个谷歌地图线程, ，你是对的 - IFrame 是由谷歌代码插入的。

你需要使用丹提到的解决方案，

你可能想尝试 此解决方案位于 ccsplay.co.uk 修复了下拉列表下方出现菜单的问题

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

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

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

Answer 5

我没有立即给你答案，但是中提到的工具 这个答案 （特别是 IE DOM Inspector）可能会有所帮助。