Question

我在iPhone和iPad上遇到border-radius问题。我正在尝试生成一个圆形的googlemap，它在每个浏览器和除ios之外的每个系统上都能正常运行。到目前为止我所做的是，我有一张地图画布

<div class="col-sm-4"><div id="map_canvas"></div></div>

和我的css

#map_canvas {
    height:474px;
    width:474px;
    border-radius:237px;
    margin-bottom:73px;
    display: block;
    overflow:hidden !important;
    position: relative !important;
}

在此操作无效后，我尝试添加更多border-radius：

.gm-style {
    height:474px;
    width:474px;
    border-radius:237px;
    overflow:hidden !important;
}
#map_canvas .gm-style > div {
    border-radius:237px;
}

但仍然没有成功。这是一个实例： http://kristinwalzer.at/website/kontakt.php

有谁知道这个问题？也许是一个解决方案？

Answer 1

为圆框添加一个div并向该圆框添加属性

<div class="col-sm-4">
   <div class="roundBox">
      <div id="map_canvas"></div>
   </div>
</div>


.roundBox{
    height:474px;
    width:474px;
    border-radius:237px;
    overflow:hidden !important;
    position: relative !important;
    z-index: 999; 
}

#map_canvas {
    height:474px;
    width:474px;
    display: block;
    border-radius:237px;
}

Answer 2

我发现了In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?

这篇文章中的所有小提琴都没有在safari（windows和ios）上工作。但即使他们在那个问题中说它已经解决了，但事实并非如此。看起来像Googlemap V3 Bug。

iPad和iPhone上的边框半径

2 个答案: