代码之家 › 专栏 › 技术社区 › Knowledge Craving

Google Map不使用XHTML Doctype(文档类型)

doctype cross-browser xhtml google-maps

Knowledge Craving · 技术社区 · 14 年前

为什么在地球上总是有一个机会,如果我们使用“Doctype”与谷歌地图,将有一个问题,显示谷歌地图正确?

在最近的一个案例中,这个“Doctype”花了我2天的时间,没有任何效率。多恶心的案子啊?这次我得到了我的一位同事(Subhankar Bannerjee)的帮助,由于他及时的;高效的帮助。他还提到了他曾多次面对的同一个问题。

有人能告诉我为什么谷歌地图会出现这种Doctype问题吗?

编辑(对于@Balus的评论):-
我使用的是(X)html1.0过渡Doctype,用于Mozilla FF&谷歌浏览器。我还没有在iev6+中查看这个Google地图,所以我不能对那些浏览器发表评论。

4 回复 | 直到 13 年前

thevilledev 14 年前

我也有同样的问题 Google Maps API v3 不久前,我必须说,这是不容易调试。

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

但是,使用DOCTYPE时,页面的呈现方式与DOCTYPE所说的相同。如果没有任何额外的CSS,设置上面这样的样式是行不通的,因为它使用的是百分比。元素没有大小,所以你最终什么都不拿。因此,如果您使用的是XHTML1.0 Strict,即。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

如果使用像素而不是百分比,则页面将按应有方式呈现:

<body onload="initialize()">
  <div id="map_canvas" style="width:500px; height:400px"></div>
</body>

所以你的选择是:

here. 还有一个表显示了不同浏览器对缺少DTD的反应。

CrazyEnigma 14 年前

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Rob 14 年前

kushpf 9 年前

一个快速的解决方案是如下使用:

document.getElementById("google-map").style.height = $(window).height()+'px';

之前

var map = new google.maps.Map(document.getElementById("google-map"), myMapOptions);

它与doctype配合得很好。试过了!:)

推荐文章

Petrolea · SVG-圆圈标记在所有浏览器中的大小都不相同(IE11)

7 年前

Dev Doc · 如何在整个应用程序的所有浏览器中禁用浏览器保存密码提示?[副本]

7 年前

funkysoul · 浏览器之间的CSS颜色差异

7 年前

Rumba · IE11上的addEventListener上未传递参数

7 年前

Basheer Kharoti · microsoft edge extension中未定义chrome

7 年前

Denisa Corbu · appendChild在IE中不工作

7 年前

Rhushikesh · 无法在angular2应用程序中接收存储事件

7 年前

Sod Almighty · 当使用rowspan时,如何在所有浏览器中正确调整表行的大小?

7 年前

Andy · 在文本区域中保存文本的独立于浏览器的方式

7 年前

Jithin Raj P R · CSS箭头在不同浏览器中的位置不同

7 年前