从图像中删除空白区域

Question

请看一下这个小提琴：

http://jsfiddle.net/cX47v/1

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

Answer 1

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

<div class='fancy_image'>
    <div class='shadow' style='border:2px solid; float:left;padding:5px;margin:10px;'>
        <div style="font-size: 0;">    
            <img class='fade' src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width=300 height=200  />
        </div>
    </div>
</div>

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

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

Answer 2

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

Answer 3

只需更改.fade css类

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