Question

我遇到了一个带有html图像映射的奇怪“bug”。当图像映射是<p>标记的一部分时，看起来浏览器正在以我不期望的方式重新解析DOM，而它们在<div>标记的一部分时工作正常。

这是一个例子以及一些评论。（我不知道如何快速托管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>

html地图区域：<p>标记与</p> <div>标记中的地图的行为不同？</div>

0 个答案: