OpenLayers Hello World示例不适用于HTML5？

我正尝试在我的网站上使用地图API。我原本是在寻找openstreetmap，但很快就意识到，如果我想显示地图，我需要使用openlayers。我仍然对这两者之间的关系很模糊，所以我会给它们加上标签。我只是试图得到一个你好世界的例子。OpenLayers Hello World示例不适用于HTML5？

OpenLayers有this page可以引导您完成首次实施。入门页面国家使用下面的代码为你的第一个例子：

<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和开放源代码知道的不多，知道问题的症结所在，但是已经缩小了问题的范围。任何人都可以解释什么是解决方案，为什么？

来源

2013-04-23 Russ

只是将其添加到<head>部分：

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

的问题是，在标准模式下，元素被默认为只大如它们所包含的元素。宽度和高度达到100％的<div>完全没有任何影响;所以地图没有大小。确保备份到元件的所有元素都是其容器的100％，这意味着它们将实际填满显示器，而不是没有尺寸。

请注意，从技术上讲，它只是高度为0;元素的宽度默认为包含元素的宽度（以及顶层<html>元素的视口），而元素的高度取决于其子元素的高度。当父母没有指定身高时，身高达到100％，反而会被视为高度为auto，这意味着将其基于其子女的身高。由于它没有孩子，所以高度为0.

如果您想了解更多详情，请查看CSS Visual Formatting Model规范。添加HTML5文档类型（或其他许多doctype中的任何一种，虽然浏览器之间的确切列表各不相同），它使浏览器进入标准模式，他们试图尽可能遵循CSS规范。没有它，你在怪癖模式下工作，其中各种浏览器实现各种非标准行为（主要基于旧版浏览器如Netscape 4或IE 5.5的工作方式）。 Here's a description基于Netscape 4如何实现它们，在怪异模式下工作的百分比高度。这里是各种浏览器的list of various behaviors that change in quirks mode，这里是Mozilla's list of how quirks mode varies in Gecko（Firefox后面的引擎）。

来源

2013-04-23 16:17:05

梦幻般的解释 – Russ 2013-04-23 17:42:52

OpenLayers Hello World示例不适用于HTML5？

回答

相关问题