DIV中的IMG仅在chrome中创建底部的额外空间

Question

我有以下代码

HTML：

<div class="dropShadow">
    <img src="images/headerimage" />
</div>

CSS：

div.dropShadow {
    background-image: url('dropshadow.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-bottom: 19px; /* the height of the shadow */
}

然而，在Firefox上它一切都很好，在Chrome和IE上，在图像底部和定位背景图像的顶部之间有一个小的空白区域。我删除了周围的所有空白区域，但我不确定要尝试的规则。有什么建议吗？

Answer 1

在IMG中写下 vertical-align：top 或 display：block 。写得像这样：

img{
 vertical-align:top;
}