Safari 在 div 中使用 Google 地图打破边框半径

对我来说关于 Stack 的第一个问题 我已经完成了我的作业并发现了类似这个主题的内容

在 webkit 浏览器中，v3 谷歌地图不尊重容器的边框半径。有人有解决方法吗？ https://stackoverflow.com/questions/15368627/in-webkit-browsers-v3-google-maps-do-not-respect-containers-border-radius-any

但我仍然看到了这个问题......所以我在这里。我正在将谷歌地图嵌入到我的一个项目中，并希望将其夹在圆形框架中。

虽然我使用的解决方案在 Chrome 和 Firefox 上效果很好，但我刚刚发现在进行一些测试时，Safari 不会在“剪切”容器上渲染边框半径，从而允许下面的谷歌地图内容与圆角重叠。

奇怪的是，这种行为只适用于 Safari。在 chrome 上它工作得很好..

你可以在 safari 和 chrome 中自行打开这个小提琴来检查一下，你会立即发现差异（注意角落）

http://jsfiddle.net/wmcmeans/YHX6c/ http://jsfiddle.net/wmcmeans/YHX6c/

MAC 的干扰非常明显：只需尝试不同的浏览器即可。

这是小提琴中使用的代码结构，它反映了我在项目中使用的代码结构

<div id="map1" class="clip">
<!--MAP GOES HERE--->
</div>



.clip {
        overflow: hidden;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.55) 10px 20px 20px;
        border: 1px solid red;
    }

注意：如果在 .clip div 内有一个静态图像作为背景，则带有边框半径的剪切效果适用于 Safari 版本 7.0.3

希望有人有一些简单的解决方法:)

谢谢你，再见

尝试这个。将这两种样式应用于地图所在的主要 div 及其所有主要子项。似乎工作得很好：

#map1 > .gm-style > div, #map1 > .gm-style > div > div  {
    overflow:hidden;
    border-radius: 20px;
}

在 Mac 上最新的 Safari 和 Chrome 上进行了测试。

演示在这里 http://jsfiddle.net/YHX6c/12/