OpenLayers Hello World示例不適用於HTML5嗎？

Question

我正在嘗試在我的網站上開始使用地圖API。 我最初看起來是openstreetmap但很快就意識到我需要使用openlayers如果我想要顯示地圖。 我對這兩者之間的關系仍然很模糊，因此我將它們都標記出來。 我只想嘗試一個問候世界的例子。

OpenLayers的此頁面將引導您完成第一個實施。 入門頁面指出您的第一個示例將使用以下代碼：

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>

</body>
</html>

如果您將頁面聲明為html5，則此代碼無效。 只要添加此標頭，示例就會停止工作：

<!DOCTYPE html>
<meta charset='utf-8'>

我不明白為什么會這樣。 該頁面非常簡單，不幸的是，我對html5和openlayers的了解不足，無法知道問題所在，但已縮小了問題所在。 誰能解釋解決方案是什么以及為什么？

Answer 1

只需將其添加到<head>部分：

<style>html, head, body { width: 100%; height: 100% }</style>

問題在於，在標准模式下，元素默認設置為僅與它們包含的元素一樣大。 寬度和高度為100％的<div>最終變成了100％一無所有； 所以地圖沒有大小。 確保所有元素備份到<html>元素是100％的容器意味着它們實際上將填充顯示，而不是沒有大小。

請注意，從技術上講，它只是高度為0; 元素的寬度默認為包含元素（以及頂級<html>元素的視口）的寬度，而元素的高度取決於其子代的高度。 當父母沒有指定高度時，高度為100％，而不是將其作為auto高度處理，這意味着將其基於其子女的高度。 由於沒有孩子，高度最多為0。

如果需要更多詳細信息，請查看CSS Visual Formatting Model規范。 添加HTML5文檔類型（或各種其他文檔類型中的任何一種，盡管確切的列表在瀏覽器之間有所不同），會使瀏覽器進入標准模式，在這種模式下，瀏覽器將嘗試盡可能地遵循CSS規范。 沒有它，你正在以怪癖模式工作，其中各種瀏覽器實現各種非標准行為（主要基於舊版瀏覽器，如Netscape 4或IE 5.5如何工作）。 這是根據Netscape 4實施百分比高度的方法來描述百分比高度在怪異模式下的工作方式。 這是在各種瀏覽器上以怪癖模式改變的各種行為的列表，這是Mozilla的Gecko （Firefox背后的引擎）中怪癖模式如何變化的列表。

OpenLayers Hello World示例不適用於HTML5嗎？

問題描述

1 個解決方案

解決方案1
7 已采納 2013-04-23 16:17:05

OpenLayers Hello World示例不適用於HTML5嗎？

問題描述

1 個解決方案

解決方案1 7 已采納 2013-04-23 16:17:05

解決方案1
7 已采納 2013-04-23 16:17:05