浮动元素跨度添加空间

Question

我有类似下面的代码：

<div style="border:2px black solid;overflow:hidden;">
    <span style="float:right;">
        <img src="sprintlogo.png" alt="Test Image 1" />
    </span>
    <img src="sprintlogo.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

由于某种原因，<div> 周围的底部边框与图像等不齐。例如，我们得到这样的结果：

图像或任何东西都不是问题（即图像文件中没有空格）。

通过将background-color:blue; 添加到<span> 的style 属性中，我们可以看到跨度似乎占用了额外的空间。

我尝试弄乱跨度的边距和填充无济于事。有人知道发生了什么吗？

Answer 1

确实很奇怪。

我发现通过删除跨度并简单地将图像向右浮动它可以删除多余的空间。表明问题存在于跨度中。

然后我查看了firebug，发现多余的空间被渲染了高度。

显然空间是由一个杂散字符创建的（这很奇怪，因为如果删除空格，该字符仍然存在......），如here 所示，我将 font-size 设置为 0 并且空间消失了.

编辑

是的，问题肯定是图像被定位，假设有文本并将其与虚构文本 (veritcal-align:baseline;) 对齐，另一个解决方法是将图像与文本底部对齐 here。