链接图像上的额外填充(在每个浏览器中)

Question

我在链接元素上添加了一个内部图像的填充问题.它发生在所有浏览器,Safari,Firefox,IE中.

我有一个重置样式表应用,所以在填充上不应该有任何额外的边距,但在检查时,很明显该a元素有一些额外的底部填充从无处.有任何想法吗？

这是标记和CSS:

<div class="movie"><a href=""><img src="img/video01.jpg" alt="" /></a></div>

div.home-col .movie {
padding: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}

div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}

div.home-col .movie img {
padding: 4px;
margin: 0;
border: 1px solid #d0d0d0;
}

Answer 1

尝试将以下行添加到link元素:line-height:0;

div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
line-height: 0;
}

Answer 2

很抱歉3年后回答这个问题,但这个页面在第一个谷歌页面,我觉得有责任.....回答:只添加"vertical-align:top;" 在标签内嵌入标签.

Answer 3

电影类的背景图像将出现在框的底部以及应用于其的填充，因此如果您需要图像底部的 11px 空间，请使用以下内容。

div.home-col .movie {
margin: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}