Html 谷歌地图iframe在手机上没有圆形边框_Html_Css_Google Maps_Iframe_Mobile Safari

Html 谷歌地图iframe在手机上没有圆形边框

html css google-maps iframe

Html 谷歌地图iframe在手机上没有圆形边框,html,css,google-maps,iframe,mobile-safari,Html,Css,Google Maps,Iframe,Mobile Safari,我在我的网站上包括谷歌地图，如下所示： <div class="map"> <div class="mapoverlay" onclick="style.pointerEvents='none'"></div> <iframe id="googlemap" width="199" height="199" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/

我在我的网站上包括谷歌地图，如下所示：

<div class="map">
<div class="mapoverlay" onclick="style.pointerEvents='none'"></div>
<iframe id="googlemap" width="199" height="199" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=KEY&zoom=14&language=nb&q=Linneaveien%2024C,1450+NESODDTANGEN"></iframe>
</div>

至少你可以看到这张地图是圆形的。但当我从智能手机（iPhone）上查看时，地图如下所示：

我可以应用哪些规则，它在智能手机上也是圆形的

提前谢谢

我刚刚创建了以下示例，并在iPhone/Safari上进行了测试，效果与预期一致

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
     <div id="map">
        <iframe width="500" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.dk/?ie=UTF8&amp;t=m&amp;ll=55.677875,11.075935&amp;spn=0.048395,0.086002&amp;z=13&amp;output=embed"></iframe>
     </div>
  </body>
</html>

尝试使用框阴影而不是边界半径？@MosesDavidowitz where？您能解释一下吗？您使用的是哪种浏览器？@salielizarry问题发生在iPhone上的Safari中。请尝试将您的iframe包装在另一个div中，并为它们提供两个边界半径

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
     <div id="map">
        <iframe width="500" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.dk/?ie=UTF8&amp;t=m&amp;ll=55.677875,11.075935&amp;spn=0.048395,0.086002&amp;z=13&amp;output=embed"></iframe>
     </div>
  </body>
</html>

#map{
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    z-index: 99;
    height: 500px;
    width: 500px;
}

#map iframe {
    position: absolute;
    border-radius: 50%;
    top: 0; left: 0;
    z-index: 50;
}