Question

JSFiddle demo

在容器元素设置为display: inline-block的下拉列表中，有一个标签（始终可见，切换下拉叠加层）和叠加元素本身。我将覆盖容器设置为height: 0并希望允许覆盖内容超过容器的高度，而不会影响任何父元素。但是，我看到一些奇怪的结果 - 覆盖容器导致下拉列表的父级也完全封闭了叠加内容！

在以下HTML中，ib =内联块和h0 = height:0重叠容器。请参阅jsfiddle演示以查看它的实际效果。

<div>
  Sort by this
  <span id="ib">
    <span>LABEL</span>
    <div id="h0">
      DROPDOWN<br />
    </div>
  </span>
</div>

我不希望在叠加层上使用position: absolute，因为我希望叠加层的内容能够驱动标签的最终宽度。令人惊讶的是，我可以通过以下css实现预期的结果：

#ib { display: inline-flex; flex-direction: column; }

我现在很乐意使用这种解决方法，但也对这种奇异效果背后的“原因”感兴趣。

Answer 1

您的问题是关于内联块元素的vertical-align规则。默认情况下baseline，这里有一些规范：

基线：将框的基线与父框的基线对齐。

另见：

计算行框中每个内联级别框的高度。对于替换元素，内联块元素和内联表元素，这是其边距框的高度;对于内联框，这是它们的“行高”。

来源：https://www.w3.org/TR/CSS2/visudet.html#line-height

和

CSS假定每种字体都有字体指标，指定高于基线的特征高度和低于它的深度。在本节中，我们使用A表示高度（对于给定大小的给定字体）和D表示深度。我们还定义AD = A + D，即从顶部到底部的距离。

来源：https://www.w3.org/TR/CSS2/visudet.html#inline-box-height

因此，根据您的选择设置line-height，您的修补程序会忽略通过font-size和vertical-align: top/bottom/middle/text-top/text-bottom设置的默认内联级块高度。

固定代码：

.dropdown {
  display: inline-block;
  vertical-align: top;
}

.overlay {
  height: 0;
}

<div>
	sort by this
	<span class="dropdown">
		<span>LABEL</span>
		<div class="overlay">
			DROPDOWN<br />
			  DROPDOWN<br />
			  DROPDOWN
		</div>
	</span>
</div>
<hr />

内联块父包装内容，其高度显式设置为0

1 个答案: