从图像中删除空白答案

【问题标题】：Remove white space from image从图像中删除空白
【发布时间】：2011-12-16 05:12:59
【问题描述】：

请看一下这个小提琴：

http://jsfiddle.net/cX47v/1

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

【问题讨论】：

这里是这个问题的简短而完整的答案：stackoverflow.com/a/31445364/3597276

标签： jquery image css

【解决方案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 在这里混合浮动和定位以及在跨度上进行定位确实很麻烦。很奇怪。

【讨论】：

两个答案都很好，谢谢你们 :) 很高兴知道 css 部分也很糟糕。在我的示例中，我没有任何跨度或定位，如果我不使用浮点数，效果将不起作用。这里有什么可以做得更好的吗？只是出于好奇，无论如何感谢解决方案:)
javascript 代码从何而来？对于这样一个简单的布局，没有必要为不同的浏览器使用不同的 CSS，而且很可能是维护上的难题。
啊，你说的是javascript？这是一个现成的脚本，所以可以：P

【解决方案2】：

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

【讨论】：

【解决方案3】：

只是改变 .fade css 类

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

【讨论】：