我在我正在构建的网站上有一个使用 Google Maps API v.3 构建的谷歌地图。它在所有浏览器中都能正常工作。但是，在 Safari 中（至少对于 Mac），它以一种奇怪的方式影响其他元素。它似乎真的只适用于绝对定位的元素，它可能与 z-index 有关。有没有人有过这样的经历？你的解决方案最终是什么？抱歉，我还不能发布 URL。
谢谢！！
【问题讨论】：
标签： css google-maps
我不完全确定那里发生了什么，因为您无法发布示例网址，但如果在您尝试了所有方法后仍然没有任何效果，您可以 report the issue 与 Google Maps API 团队联系，他们可以更彻底地调查以了解问题所在。
【讨论】：
我最终找到了解决问题的方法。它确实与 z-index 有关。有趣的是，它只发生在 Safari 中。无论如何，如果其他人注意到 Safari 和谷歌地图发生了一些奇怪的事情，它可能与您页面上某个元素的 z-index 有关。那就是我要开始的地方。再次感谢！
【讨论】：
这确实是一个错误，并不是专门针对 Google 的，它与 z-indexing 搞砸有关，无论何时使用 webkit，或者看起来如此。
对此有两个修复，希望其中一个有效。
1. 这是首选修复方法。从加载谷歌地图的 DOM 元素中删除 webkit-transform，并将其 z-index 设置为“auto”。还将它的子 div 设置为“auto”的 z-index。您可以使用 CSS 执行此操作，如下所示：
#googleMap{
-webkit-transform: none !important;
z-index: auto !important;
> div{
z-index: auto !important;
}
2. 删除页面上每个绝对定位元素的 z-index 值（除了 Google Maps z-indexes），即为所有绝对定位元素设置 z-index到 z-index：自动。
【讨论】：
我遇到了与线程启动器描述的完全相同的问题。在我的情况下，整个导航消失了（在这种情况下，导航包装器似乎是一个流行的 div，经过一些研究）。当我从网站上删除 Google Map div 时，导航会显示出来。
无论如何，我的解决方案是在我的 Google 地图 div 中添加直接样式：
<div id="map" style="-webkit-transform: none; z-index: 10;"></div>
这解决了我的问题。希望它可以帮助那里的人！
【讨论】：
全局删除翻译会破坏我们应用中的其他功能。然而，它确实为我们指明了正确的方向。 这个解决方案对我们有用。我们将所有地图图钉元素移回 103 层。
div[id*='marker_div_']{
-webkit-transform: translateZ(103px);
}
【讨论】：
在这里对我有用的解决方案（如 -webkit-transform:none; 停止在页面上工作的地图和其他功能）是在加载后通过 jQuery 对内容进行 ajax。
希望有帮助！
【讨论】：
我在 Safari 中遇到了同样的问题。在我的 safari 中，它导致我在受影响的 div 上的字体变得非常细且未定义。我发现的原因是受影响的 div 将阴影投射到包含谷歌地图的 div 上。如果我删除 drop show，问题就解决了。
【讨论】：