javascript - 当页面包含谷歌地图时，修复 IE7 中 CSS/JS 下拉菜单的最佳方法

Question

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

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

在这种情况下，下拉菜单根本不起作用。但是，该页面在 FireFox 2 中仍然有效。

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

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

score 2 · Accepted Answer

我不知道这是否能解决您的问题，但您可能想在 ccsplay.co.uk 上尝试此解决方案，该解决方案解决了下拉列表下方出现的菜单问题。我不知道它是否会起作用，但值得一试。

score 2 · Accepted Answer

我使用这个jQuery修复了一个类似的问题，即下拉菜单没有出现在 IE6/IE7/IE8 中的 Flash 电影上：

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

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

之所以可行，是因为 IE 比z-index. 它仍然无法显示在 Windows Media Player 插件之上。

score 2 · Accepted Answer

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

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

我会首先尝试使用纯 CSS 并包括我提到的 hack 来制作一个没有 Javascript 的菜单。它可能会解决您的问题。你实际上并不需要 Javascript 来改变鼠标悬停的样式和类似的东西。

如果你想了解 CSS hacking 的内容：点击这里

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

希望这可以帮助！

score 2 · Accepted Answer

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

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

您可能想在 ccsplay.co.uk 上尝试此解决方案，该解决方案解决了菜单出现在下拉列表下方的问题

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

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

score 0 · Accepted Answer

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

5 回答 5