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