从图像中删除空白区域

请看看这个小提琴：

http://jsfiddle.net/cX47v/1

我只是想保留你看到的效果，但我想删除图像下方的空白区域。 我知道display：block，但是如果我这样做，hover效果就不起作用了。 关于如何解决这个问题的任何想法？

Answer 1

将HTML更改为我下面的内容（添加style="font-size:0" ）可以解决Chrome，Firefox，IE9和Safari中的问题。 我之前看过这个问题，浏览器假定一行文本为一些额外的高度，即使没有可见的文本。

你可以在这里看到它的工作： http ： //jsfiddle.net/jfriend00/8FkmG/ 。 图像周围的剩余空白区域由HTML中的填充控制。

总的来说，你的HTML / CSS在混合浮动和定位以及在跨度上进行定位时非常麻烦。 很奇怪。

Answer 2

设置line-height:0; 在你的影子div。

Answer 3

只需更改.fade css类

 .fade {font-size:0px; background: url('http://james.linnegar.com/demos/js/win7/hover.png'); }