通过 HTTP 服务器提供时的小 jvectormap 高度

Question

我正在尝试在本地测试我的 jvectormap。以前我只是直接通过浏览器访问 HTML 文件。我最近改用 HTTP 服务器来提供文件，但现在地图显示的高度非常小。奇怪的是，如果我调整浏览器的大小（更大或更小），地图会变得越来越大（似乎不会停止扩展）。最初呈现时的地图高度为 54px。

为我定义的 div 设置 height CSS 属性以包含地图，以及 .jvectormap-container div，没有帮助.它会增加背景尺寸，但不会增加实际地图的尺寸。 <svg> 标签中的高度实际上导致了我这个问题。

当我直接通过文件再次访问网站时，它呈现正常。当我执行 "view source" 并通过 HTTP 服务器访问所有文件时，它们看起来也很好。 JS控制台没有错误。我在多个浏览器上遇到同样的问题。

这是我的 body html:

<body>
  <div id="world-map" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"></div>
  <script src="main.js"></script>
</body>

并且main.js包含

var mapDiv = $('#world-map');
mapDiv.vectorMap();

Answer 1

问题是 HTTP 服务器响应 JS 文件的 MIME 不正确。

知道为什么这会导致这个特定问题会很有趣。

Small jvectormap height when served through HTTP server