当页面包含Google Map时,修复IE7中CSS/JS下拉菜单的最佳方法


3

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

这对我工作正常除了在IE6和IE7当我有一个谷歌地图的网页。

在这种情况下,下拉菜单根本不起作用。但是,该页面继续在FireFox 2中工作。

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

是否有其他人遇到类似这样的问题?如果是的话,他们是否有解决这个问题的最佳方法的建议?

2

我不知道这是否可以解决您的问题,但您可能想尝试this solution at ccsplay.co.uk,它可以解决菜单出现在下拉列表下方的问题。我不知道它是否可以肯定,但值得一试。


0

我没有立即为您解答,但this answer(特别是IE DOM检查器)中提到的工具可能会有所帮助。


2

我固定使用这个jQuery没有出现在Flash动画在IE6/IE7/IE8下拉菜单中的类似问题:

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

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

这个原因起作用的原因是因为IE尊重源排序比它的z-index多。尽管如此,它仍然无法在Windows Media Player插件的顶部显示。


2

我相信可能会发生这种情况,因为IE 6+使用Active-X来解析CSS。

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

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

如果你想看看什么CSS黑客大概是:单击here

如果你想看看一些纯CSS菜单实例:单击here

希望这有助于!


2

根据this google maps thread,你是正确的 - 一个IFrame是由谷歌代码插入。

你需要使用哪个丹提到的解决方案,

你可能想尝试this solution at ccsplay.co.uk它修正出现的下拉列表

或者菜单的问题,请参阅Internet Explorer HACK/Fix For Select Box Showing through DIV

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

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