html - iPad 和 iPhone 上的边框半径

Question

我在 iPhone 和 iPad 上遇到了 border-radius 的问题。我正在尝试生成一个圆形的 googlemap，它在除 ios 之外的每个浏览器和每个系统上都可以正常工作。到目前为止我所做的是，我有一个 map Canvas

<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;
}

在这不起作用之后，我尝试添加更多的边界半径:

.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;
}