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

.outerspan {
    display:block;
}

Answer 2

从 innerspan 中移除 float：left ，似乎可以在你的小提琴中使用。我在这里得到了span / float的目的。使用float从文档流中删除元素。如果要将文本对齐到左侧，请使用text-align：left。

修改

HTML中的空格会影响所有内联元素，它会特别影响高度。您在outerspan上使用了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>

您会注意到，如果在结束范围标记之前删除空格，则会影响高度。因此，使用display：block将忽略空格或删除HTML中的空格。

为什么label和span之间的空格会增加div的高度（仅限Chrome）？

2 个答案: