html地图区域：中地图的不同行为<；p>；标签与<；部门>；标签？_Html_Dom

html地图区域：中地图的不同行为<；p>；标签与<；部门>；标签？

html dom

html地图区域：中地图的不同行为<；p>；标签与<；部门>；标签？,html,dom,Html,Dom,我在html图像映射中遇到了一个奇怪的“bug”。当图像映射是标记的一部分时，浏览器似乎正在以我不期望的方式重新解析DOM，而当图像映射是标记的一部分时，它们工作正常这里有一个例子和一些评论。（我不知道如何快速托管html页面，所以这里是html源代码有人能解释发生了什么事吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM bug?&l

我在html图像映射中遇到了一个奇怪的“bug”。当图像映射是

标记的一部分时，浏览器似乎正在以我不期望的方式重新解析DOM，而当图像映射是

标记的一部分时，它们工作正常

这里有一个例子和一些评论。（我不知道如何快速托管html页面，所以这里是html源代码

有人能解释发生了什么事吗

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>DOM bug?</title>
    <style type="text/css">code { font-family: monospace; } </style>
</head>
<body>
<h1>DOM bug?</h1>
<p>There seems to be a bug (or a poorly-documented behavior) in how browsers handle map areas with other HTML elements in the map.
The first image below works properly: there are four overlapping map areas covering all but the center square. The second image
below has a <code>map</code> element that seems to reject all child elements following the first non-<code>area</code> child element, so only the left and right
columns are covered by the image map areas.
The only difference is that the first map is enclosed by a <code>div</code> element and the second map is enclosed by a <code>p</code> element.</p>

<p>I've observed this on Firefox 8.0, Opera 11.61, Chrome 16.0.912.77; whereas Safari 5.0 and IE 7.0 renders both image maps "correctly".</p>

<span>
<div>
<!-- convert -size 45x45 pattern:checkerboard -filter box -resize 300x300 -auto-level +level-colors yellow,black ck1.png -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX//wD/pQDmL6nOAAAACXBIWXMAAABPAAAATwFjiv3XAAAATUlEQVR42u3YMQEAMAgDwTiof5d10K4sYID7NacgSem8UtowDMMwDMMwDMMwbBWry+0HDMMwDMMwDMMwDFvLnAkYhmEYhmEYhmEYNrIPTJJ1lg/rCykAAAAASUVORK5CYII="
 width="300" height="300" class="map" usemap="#simple1" />
<map name="simple1">
    <area id="area-left" href="#" shape="rect" coords="0,0,100,300" alt="Link" title="left rectangle" />
    <area id="area-right" href="#" shape="rect" coords="200,0,300,300" alt="Link" title="right rectangle" />
    <div>
    </div>
    <area id="area-top" href="#" shape="rect" coords="0,0,300,100" alt="Link" title="top rectangle" />
    <area id="area-bottom" href="#" shape="rect" coords="0,200,300,300" alt="Link" title="bottom rectangle" />
</map>
</div>

<p>
<!-- convert -size 45x45 pattern:checkerboard -filter box -resize 300x300 -auto-level +level-colors yellow,black ck1.png -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX//wD/pQDmL6nOAAAACXBIWXMAAABPAAAATwFjiv3XAAAATUlEQVR42u3YMQEAMAgDwTiof5d10K4sYID7NacgSem8UtowDMMwDMMwDMMwbBWry+0HDMMwDMMwDMMwDFvLnAkYhmEYhmEYhmEYNrIPTJJ1lg/rCykAAAAASUVORK5CYII="
 width="300" height="300" class="map" usemap="#simple2" />
<map name="simple2">
    <area id="area2-left" href="#" shape="rect" coords="0,0,100,300" alt="Link" title="left rectangle" />
    <area id="area2-right" href="#" shape="rect" coords="200,0,300,300" alt="Link" title="right rectangle" />
    <div>
    </div>
    <area id="area2-top" href="#" shape="rect" coords="0,0,300,100" alt="Link" title="top rectangle" />
    <area id="area2-bottom" href="#" shape="rect" coords="0,200,300,300" alt="Link" title="bottom rectangle" />
</map>
</p>
</span>

</body>
</html>

根据规则，段落只能包含内联内容，不能包含块内容。为什么不在回答中详细说明？