Question

好的，我确定这里的每个人都厌倦了听到有关Gmaps和Jquery标签的内容，因为这里有很多关于它的问题，但这很奇怪。

以下是问题的屏幕截图： http://scotbrut.co.uk/screenshot-chrome-maps-tabs-issue.png

你可以在网站上看到它（请确保在Chrome中查看）： http://scotbrut.co.uk/archive/hunterian-art-gallery/ ...或网站上的任何存档条目。

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

据我所知，问题似乎仅限于Google Chrome（win＆amp; mac）;我在我的Mac上测试了Firefox和Safari中的网站，在Windows上测试了Firefox，Chrome和IE7到10，没有任何问题。

更奇怪的是，该网站工作完全正常，直到昨天这个问题出现了丑陋的头脑。过去一周对代码甚至内容进行了没有更改，并且没有应用插件或Wordpress更新，所以我无法理解为什么会突然发生这种情况？

任何输入都会非常感激 - 到目前为止，我设法诊断出来的是谷歌地图，Chrome和jquery标签组合的问题......但它确实有效完美的将近3个月！通常情况下，我会把它归结为我的伪劣编码和谷歌，直到我找到一个解决方案（通常在这里），但这真的让我很难过。

基本网站信息：

该网站建立在Wordpress 3.5上，谷歌地图使用WP谷歌地图插件显示（所以他们用短代码调用），选项卡只是一个基本的jquery选项卡设置。我不记得哪一个具体，但它们似乎基本相同。

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

另外 - 这是我在这里发表的第一篇文章，所以请轻松一点:)哈哈。

Answer 1

是的，所以我对这些事情很不耐烦，不愿意等待谷歌修复这个错误（如果它确实是一个错误......我个人认为它甚至是Safari，另一个webkit浏览器，代码没有问题），所以我找到了类似于Roasted建议的解决方法。

问题似乎源于{visibility: hidden;}应用于地图。由于某些原因，chrome将其渲染为您在上面的屏幕截图中可以看到的黑盒子。当它设置为可见时，地图将显示所有其他选项卡/内容。似乎可见性规则被chrome解释为意义隐藏地图内容（所以图像拼贴等），但现在是容器的其余部分。

我发现的解决方法是jquery选项卡代码的一部分，当您通过添加或删除包含{visibility: hidden;}或{visibility: visible;}的类时单击链接时隐藏/显示每个选项卡。

我所做的只是将一个带有{visibility: hidden;}的类（在本例中为.novis）添加到整个地图选项卡容器div中，以便整个地图选项卡在加载时隐藏，而不仅仅是地图本身。然后我简单地给地图选项卡链接一个唯一的ID（在这种情况下是#mappage），以便Javascript挂钩并编写一些脚本来说明点击地图选项卡链接会删除无可见性{{1} }类。似乎现在在所有浏览器中都能正常工作。

这是我添加的代码：

.novis

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

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

希望这是有道理的。我怀疑这对任何人都有用，但我可以发布我发现的内容。再次感谢Roasted指出我正确的方向：）

Google地图和Jquery标签：地图会在所有内容上加载黑色矩形 - 仅限Google Chrome

1 个答案: