我正在使用mapbox.directions v0.3.0。我在使用Internet Explorer时遇到了缩放控件的错误。它适用于Edge,Chrome和Firefox。我有以下布局:
<div id="pnlMapControl">
<div id="pnlRoutePane">
<div id="divRouteInputs"></div>
<div id="divRouteErrors"></div>
<div id="divRouteDirections">
<div id="divAlternateRoutes"></div>
<div id="divRouteInstructions"></div>
</div>
</div>
<div id="pnlMap"></div>
<div id="pnlStatusBar">
<span id="lblStatus">Status</span>
<span id="lblLatLon" style="float:right">LatLon</span>
</div>
</div>
pnlMapControl是一个顶级容器控件。 pnlMap是Mapbox地图的容器。 pnlRoutePane是我想要输入控件并显示指令的地方。我宁愿将控件与地图容器分开。 pnlRoutePane位于左侧(其可见性打开和关闭,因此只有在使用路径时才可见),pnlMap位于右侧。
我的问题是,在IE11中,当我单击地图上的缩放控件时,它会导致父pnlMapControl容器向左移动pnlRoutePane的宽度并在左侧位置0显示Mapbox地图。所有其他浏览器都可以正常工作。有没有可以做的事情,以便它也可以与IE一起使用?
提前致谢。我的CSS如下:
#pnlMapControl {
position: absolute;
left: 0px;
right: 0px;
top: 60px;
bottom: 0px;
background-color: red;
}
#pnlRoutePane {
position: absolute;
left: 0px;
width: 300px;
top: 33px;
bottom: 20px;
background-color: lightseagreen;
display: none;
}
#pnlMap {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: lightyellow;
}
#pnlStatusBar {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 20px;
background-color: lightblue;
}
#lblStatus {
margin-left: 5px;
vertical-align: middle;
}
#lblLatLon {
margin-right: 5px;
vertical-align: middle;
}
#divRouteInputs {
position: absolute;
top: 10px;
left: 10px;
width: 280px;
height: 80px;
background-color:yellow;
}
#divRouteErrors {
position: absolute;
top: 120px;
left: 10px;
padding: 10px;
border-radius: 0 0 3px 3px;
background: rgba(0,0,0,0.25);
}
#divRouteDirections {
position: absolute;
top: 120px;
left: 10px;
bottom: 0px;
overflow: auto;
background: rgba(0,0,0,0.8);
}