为什么标签和跨度之间的空间会增加 div 的高度（仅限 Chrome）？

Question

我在客户网站上遇到了这个问题。我已经缩小了这个问题，发现问题是一个介于结束标签和结束跨度之间的空格。比较这两个：

<div class="outerdiv">
 <span class="outerspan"><span class="innerspan"></span>
 <input type="radio" value="true" checked="checked"><label>Label</label></span>
</div>


<div class="outerdiv">
 <span class="outerspan"><span class="innerspan"></span>
 <input type="radio" value="true" checked="checked"><label>Label</label> </span>
</div>

在 Chrome 中，外部 div 的高度差异很大，差异基于标签的边距。不在FF。它似乎与内联块有关。但是，我似乎无法理解这些数字，而且 Chrome 开发人员工具似乎也无法帮助我弄清楚它们。

这是一个显示高度的小提琴：

http://jsfiddle.net/3hHk5/6/

更新： Safari 也增加了高度，但不如 Chrome。数字对我来说似乎很随机。

澄清： 我想了解 为什么 FF、Chrome 和 Safari 之间的高度不同以及数字的来源。我的特定问题的解决方法可能只是删除空间:)

Answer 1

从 innerspan 中删除 float:left，似乎对你有用。我在这里完全理解了 span/float 的目的。使用 float 从文档流中删除元素。如果要将文本左对齐，请使用 text-align:left。

编辑：

HTML 中的空格会影响所有的内联元素，尤其会影响高度。您在外跨上使用了 display:inline-block。如果您注意到，您的第二个 DIV 中的结束跨度标记之前有空格。这就是额外高度的原因。

<div id="space" class="outerdiv space">
<span class="outerspan"><span class="innerspan"></span><input type="radio" value="true"     checked="checked"><label>Label</label> </span>
</div>

您会注意到，如果您删除结束 span 标签之前的空格，它会影响高度。因此，无论使用 display: block 都会忽略空格或删除 HTML 中的空格。

Answer 2

.outerspan {
    display:block;
}