html - 为什么标签和跨度之间的空间会增加 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 的高度差异很大，差异基于标签的边距。不在法郎。它似乎与内联 block 有关。但是，我似乎无法理解这些数字，而且 Chrome 开发人员工具似乎无法帮助我弄清楚这些数字。

这是一个显示高度的 fiddle :

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

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

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

Answer 1

从 innerspan 中删除 float:left，似乎在您的 fiddle 中起作用。我在这里完全明白 span/float 的目的。使用 float 从文档流中删除元素。如果要将文本左对齐，请使用 text-align:left。

编辑:

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

<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 中的空格。