提问人：Matt Mitchell 提问时间：8/21/2008 最后编辑：4dgauravMatt Mitchell 更新时间：6/26/2014 访问量：2274
当页面包含谷歌地图时，在IE7中修复CSS / JS下拉列表的最佳方法
Best way to fix CSS/JS drop-down in IE7 when page includes Google Map
问：
我有一个使用列表进行导航的页面（Javascript 将样式更改为在鼠标悬停时显示或不显示）。<ul>
这对我来说工作正常，除了在 IE6 和 IE7 中，当我的页面上有 Google 地图时。
在这种情况下，下拉列表根本不起作用。但是，该页面在 FireFox 2 中继续工作。
我做了一些研究，发现这可能是 IE 选择框错误的一个例子，但我不确定，因为 Google 地图似乎使用的是 ，而不是 .<div><iframe>
是否有其他人遇到过类似的问题，如果有，他们对克服这个问题的最佳方法有什么建议吗？
答：
0赞
Cebjyre
8/21/2008
#1
我没有立即给你答案，但这个答案中提到的工具（特别是IE DOM检查器）可能会有所帮助。
2赞
Dan Herbert
8/21/2008
#2
我不知道这是否会解决您的问题，但您可能想在 ccsplay.co.uk 尝试此解决方案，该解决方案解决了菜单出现在下拉列表下方的问题。我不知道它是否肯定有效，但值得一试。
2赞
travis
8/21/2008
#3
我使用这个jQuery修复了一个类似的问题，即下拉菜单没有出现在IE6 / IE7 / IE8中的Flash电影中：
$(function () {
$("#primary-nav").appendTo("#footer");
});
其中 是下拉容器元素的 ，是页面上最后一个元素的 。然后，我使用绝对定位将下拉列表重新定位回它们所属的顶部。primary-navIDfooterID
这样做的原因是 IE 更尊重源代码排序，而不是 .不过，它仍然无法在 Windows Media Player 插件上显示。z-index
2赞
Joum
10/1/2008
#4
我相信这可能是因为IE 6+用来解析CSS的Active-X。
随着时间的流逝，我不得不调整我的工作，在我的CSS中加入一些IE黑客，以便它与多个浏览器兼容。
我会首先尝试制作一个没有 Javascript 的菜单，使用纯 CSS 并包括我提到的技巧。它可能会解决您的问题。您实际上不需要 Javascript 来更改鼠标悬停和类似内容的样式。
如果你想看看CSS黑客是关于什么的：点击这里
如果你想查看一些纯CSS菜单的例子：点击这里
希望这有帮助！
2赞
Adz
10/2/2008
#5
根据这个谷歌地图线程，你是对的 - 谷歌代码插入了一个 IFrame。
您需要使用 Dan 提到的解决方案，
您可能想在 ccsplay.co.uk 尝试此解决方案，该解决方案解决了菜单出现在下拉列表下方的问题
或者，请参阅 Internet Explorer HACK/Fix For Select Box Display through DIV.或者，请参阅 Internet Explorer HACK/Fix For Select Box Display through DIV（通过 DIV 显示选择框）。
基本上，解决方案是使用 JavaScript 将 css 菜单放在 IE6 的 IFrame 中。
另一种解决方案是在下拉 CSS 菜单时使用 JavaScript 隐藏 Google 地图，或者在下拉 CSS 菜单时将 Google 地图替换为静态地图（甚至可能是 Google 静态地图）。
评论