求教百度地图溢出隐藏兼容性的问题

如图：
http://i5.tietuku.com/8726fa9ce866fc77.jpg
求解决方法。

代码如下：
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C4aa6816396b5685b4f6e04ce781f024"></script>
<style type="text/css">
.gmap{
border: 10px solid #f6f5f0;
border-radius: 50%;
height: 300px;
width: 300px;
box-shadow: 0px 0px 3px 3px #e7e4dc;
overflow: hidden;
position: relative;
margin: 0 auto;
z-index:999;
}
</style>
</head>

<body>
<div class="gmap">
<div style="width:300px;height:300px; font-size:12px;" id="map"></div>
</div>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap(){
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.403963,39.915112),15);
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
function addMapOverlay(){
}
//向地图添加控件
function addMapControl(){
var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl);
}
var map;
initMap();
</script>
</body>
</html>
```