Question

我的网站上有所有谷歌地图的容器div。

css如下：

#map_canvas {
    border-radius: 50%;
    border: 0.625rem solid #e5e5e5;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    width: 300px;
}

在Chrome，Firefox和IE中的桌面/笔记本电脑上地图在其容器中正确显示并观察溢出：隐藏。

当我在Chrome中的Andriod设备或Chrome和Safari中的iPhone上查看时，地图会溢出容器的边缘，而不是观察溢出：隐藏。

Answer 1

我建议将地图放在具有所需宽度和高度的容器中，并将溢出设置为隐藏。

HTML:
<div class="container">
    <div id="map_canvas"></div>
</div>

CSS：

.container{
    height: 300px;
    margin: 0 auto;
    width: 300px;
    border-radius: 50%;
    overflow:hidden;
    border: 0.625rem solid #e5e5e5;

#map_canvas {
    height: 300px;
    width: 300px;
}

谷歌地图溢出包含div

1 个答案: