html - 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;
}