谷歌地图和Jquery标签：地图在所有内容上加载黑色矩形-仅在谷歌浏览器中

好吧，我相信这里的每个人都厌倦了听到GMAP和Jquery标签，因为这里有很多关于它的问题，但这是一个奇怪的问题

以下是问题的屏幕截图：

您可以在这里的网站上亲自观看，请确保在Chrome中查看： …或在网站上的任何存档条目上

基本上，谷歌地图窗口（显示在每个归档条目的最后一个选项卡中）在所有其他选项卡和内容的顶部显示一个黑色矩形，尽管您可以通过它单击选择文本/单击链接等。您可以通过单击“图库”或“地图”选项卡使其消失

据我所知，这个问题似乎仅限于谷歌Chrome win&mac；我在mac和Firefox上测试了Firefox和Safari，在windows上测试了Chrome和IE7到IE10，没有问题

---

更奇怪的是，直到昨天，当这个问题再次出现时，这个网站一直运转良好。在过去的一周里，代码甚至内容都没有改变，也没有应用插件或Wordpress更新，所以我无法理解为什么会突然发生这种情况

任何输入都将不胜感激——到目前为止，我所能诊断出的是，这是一个谷歌地图、Chrome和jquery标签组合的问题……但它在近3个月前一直运行良好！通常我会把它归结为我的劣质编码和谷歌搜索，直到我找到一个解决方案通常在这里，但这真的难住了我

基本网站信息： 该网站是建立在Wordpress 3.5上的，谷歌地图是使用WP谷歌地图插件显示的，因此可以用一个短代码调用它们，而这些选项卡只是一个基本的jquery选项卡设置。我不记得具体是哪一个，但它们似乎基本上都一样

如果有任何代码或任何需要帮助诊断的问题，请告诉我，我会很乐意帮忙

---

还有-这是我在这里的第一篇帖子，所以放轻松点：哈哈。

对了，所以当涉及到这些事情时，我很不耐烦，不愿意等待谷歌修复这个bug，如果它确实是一个bug……我个人认为是的，即使是另一个webkit浏览器Safari，代码也没有问题，所以我找到了一个类似于我建议的解决方法

问题似乎源于{visibility:hidden；}应用于地图。出于某种原因，chrome将其渲染为您在上面的屏幕截图中看到的黑匣子。当设置为可见时，地图将显示在所有其他选项卡/内容上。看起来，chrome将可见性规则解释为隐藏地图内容，以便图像平铺等，但现在是容器的其余部分

我找到的解决方法是jquery选项卡代码的一部分，它通过添加或删除具有{visibility:hidden；}或{visibility:visible；}的类，在单击链接时隐藏/显示每个选项卡

我所做的只是将一个具有{visibility:hidden；}的类（在本例中为.novis）添加到整体映射选项卡容器div中，以便在加载时隐藏整个映射选项卡，而不仅仅是映射本身。然后，我简单地给了map选项卡链接一个惟一的ID（在本例中是mappage），让Javascript钩住它，并编写了一段脚本，说明单击map选项卡链接将删除NoVisibility.novis类。现在似乎在所有浏览器中都可以正常工作

以下是我添加的代码：

$("ul.tabs li#mappage").click(function() {
            $("div#mapcontainer").removeClass("novis");
            //$(this).addClass("active"); 
            });

这是整个jquery选项卡代码，最后是我的代码片段：

  <script type="text/javascript">
    $(document).ready(function() {

        //Default Action
        $(".tab_content").css({'visibility':'hidden'  , 'position':'absolute'});
        $("ul.tabs li:first").addClass("active").show(); 
        $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); 

        //On Click Event
        $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active"); 
        $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
            var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).css({'visibility':'visible'  , 'position':'static'});
        return false;
        });
        $("ul.tabs li#mappage").click(function() {
        $("div#mapcontainer").removeClass("novis");
        //$(this).addClass("active"); 
        });
    });
</script>

---

希望这是有意义的。我怀疑这对其他人会有多大用处，但我想我还是把我发现的东西贴出来吧。再次感谢Beated为我指明了正确的方向：

在chrome Win7Thank Beated下对我来说很好。这很有趣。我可以在win7上的Chrome中重现这个问题，就像他的电脑上的客户端一样。也许这只是一个简单的cookie/cache问题？也就是说，我在我的win7虚拟机上的一个干净/普通的Chrome安装上测试了它。我会尝试清除我的mac电脑的缓存，看看是否有什么不同。干杯：更新：清除缓存、cookies等，问题仍然存在。要测试它，我单击“地图”选项卡，然后单击“规划与设计”，但没有出现黑色矩形。如果你检查这个黑色矩形右键点击->检查元素，你会得到什么？更奇怪的是，直到昨天，这个网站还运行得很好。你能检查一下你的chrome版本并将其发布到这里，与我的chrome使用自动更新进行比较吗？