iframe 上的边界半径在 MAC（野生动物园）上不起作用

Question

我正面临 CSS 问题。 边框半径在 mac book (Safari) 上不起作用.. 当我试穿寡妇时，它工作得很好..

这是我的html

   <div class="map">
       <div class="map-border">    
          <iframe width="295" height="295" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3160.515465008442!2d-122.40503609999998!3d37.6135611!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f77776e3c0101%3A0x78bd162ebe8e8904!2s1699+El+Camino+Real+%23201!5e0!3m2!1sen!2s!4v1403695117548">

        </iframe>
   </div>

这是我的CSS代码。

        .map {
width: 315px;
height: 315px;
overflow: hidden;
position: relative;
border: 10px rgba(0, 0, 0, 0.1) solid;
-webkit-border-radius: 190px;
-moz-border-radius: 190px;
-ms-border-radius: 190px;
-o-border-radius: 190px;
border-radius: 190px;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in; 
z-index: 10;
}
.map .map-border {
  position: absolute;
  overflow: hidden;
  height: 295px;
  border: 10px white solid;
  -webkit-border-radius: 190px;
  -moz-border-radius: 190px;
  -ms-border-radius: 190px;
  -o-border-radius: 190px;
  border-radius: 190px; 
  overflow: hidden;
  z-index: -10;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  }

 iframe {
-webkit-border-radius: 190px;
-moz-border-radius: 190px;
-ms-border-radius: 190px;
-o-border-radius: 190px;
border-radius: 190px;
border: 0; 
display: block;
}

这是实时代码。 http://jsfiddle.net/adnan00733/ju9zL9um/ 注意：在 Windows 上看起来不错。但不幸的是它不适用于 MAC..

请帮忙。 提前致谢。

Answer 1

好吧，我能想到的最佳解决方案是：

1. 将图像放在地图的顶部。在这种情况下，您可能无法访问您的地图。

1. 在地图的每一侧放置四张图像，即一张。不是最漂亮的解决方案，但只要它有效...))

（如果你愿意，我可以给你剪成碎片）