Я столкнулся со странной «ошибкой» с html-картами изображений.Похоже, что браузер повторно анализирует DOM таким образом, чего я не ожидаю, когда карты изображений являются частью тега <p>, тогда как они прекрасно работают, когда являются частью тега <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>