设计网页时，经常会用到地图功能，例如：
<tr><td>
<img src="images/test.jpg" usemap="#navigator">
<map name="navigator">
<area shape="rect" coords="370,10,420,25" href="about.htm" alt="关于我们">
<area shape="rect" coords="643,10,693,25" href="contact.htm" alt="联系我们">
</map></td></tr>
<tr ...
这样在图像"test.jpg"这一行和下一行之间，会出现多余的空白或间隙(几个像素)，无论怎么调整行高或图像大小，都无法消除。
经仔细比较分析，终于找出了原因。<map ...> ... </map>这一段，不能直接放到图像后面，否则会出现前面所说的问题，正确的方法是，将这一段放到其他地方，例如<Head>和</Head>之间，这样，就不会有任何问题了，行与行之间再不会出现讨厌的多余空白了。
写header时本来用的是背景图，但因为要加image map,所以改成了在div中插入图。测试时发现，ie6里图下面出现了一条短短的空白区域，如下图：
代码很简单，示例如下：
css
<style>
div
{width:500px;
height:300px;/*图片大小*/
border:1px solid green;
}
img
{
width:500px;
height:300px;
border:none;/*取消因为加了map带来的边框*/
}
</style>
HTML
<body>
<div>
<img src="test.jpg" usemap="#m_test" alt="" /><map name="m_test" id="m_testimg">
<area shape="rect" coords="304,142,374,219" href="#" alt="" />
</map>
</div>
</body>
其实只要换一下写法，空白就消失了，只有ie6这么磨练人的耐心：
<body>
<div>
<img src="test.jpg" usemap="#m_test" alt="" /><map name="m_test" id="m_testimg"><area shape="rect" coords="304,142,374,219" href="#" alt="" /></map></div>
</body>
唯一的变化就是从<img...>到</div>中间不要强制换行；
或者干脆就把</div>直接写到<img...>后吧，一样不要因为格式好看强制换行：
<body>
<div>
<img src="test.jpg" usemap="#m_test" alt="" /></div>
<map name="m_test" id="m_testimg">
<area shape="rect" coords="304,142,374,219" href="#" alt="" />
</map>
</body>
posted on
