MapBox在Vue中显示是样式错乱问题

在使用MapBox和Vue进行开发时,发现了一个问题,设置地图容器宽高均为100%,但是地图的宽度却只占屏幕的一半大小,各类空间的位置却非常正确。情况如下图所示,在IE浏览器中却正常显示。

MapBox在Vue中显示是样式错乱问题

 最后在经过多番查找发现,是CSS样式的问题,在vue中引发了样式问题

添加如下代码就解决了:

  .mapboxgl-canvas {
    position: relative !important;
  }