iframe上的边界半径不适用于MAC（safari）

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. 放置四张图片，即地图两侧各一张。不是最美丽的解决方案，但只要它有效......））

（如果你愿意的话，我可以把图片分割成碎片）