图片在IE下存在空隙

前两天在对公司网站进行更新时，遇到一个HTML的问题。最初的代码大致是这样：

<div class="ban-img" style="height:87px;">
  <h1><a href="/"><img src="/images/new/example.gif" border="0" /></a></h1>
</div>

更新后的代码大致如下: （注：只显示出问题的部分代码）

<div class="ban-img" style="height:87px;">
<h1>
<a href="/"><img src="/images/new/example.gif" border="0" /></a>
</h1>
</div>

实际这里我只是把<h1>分行写而已，图片的高度是87px；包含图片的div的高度也是87px，另外div和h1的margin和padding都设为零了，可是更新后的代码在IE下(IE6和IE7)下，图片下方出现一个大约5px的空隙。因为这次更新是针对代码的其他部分，一开始并没有注意得到问题会处在这里，所以花了挺长时间debugging才找出原因。把<h1>和其内容写在同一行后问题就解决了。

之后，我重新温故了以前收集的有关IE的CSS问题的解决方案。其实这个问题还有一个解决方案，那就是设置img为display:block。如下：

<div class="ban-img" style="height:87px;">
<h1>
<a href="/">
  <img src="/images/new/example.gif" border="0" style="display:block;" />
</a>
</h1>
</div>