带缩放控件的Mapbox Bug

时间:2015-10-02 15:26:10

标签: mapbox directions

我正在使用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);
    }

0 个答案:

没有答案