在绝对定位的桌子上不尊重高度

Question

如果带有display: table 的绝对定位元素明确设置了高度，如果内容高度大于提供的高度值，则该元素将收缩包裹内容而不考虑高度值。

#main {
  width: 100px;
  height: 29px;
  position: absolute;
  top: 20px;
  left: 200px;
  border: 1px red dashed;
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
}

#child {
  display: table-cell;
}

<div id="main">
  <div id="child">Custom Text With Validation:</div>
</div>

Answer 1

表格单元格不尊重其父级的高度，原因与我不尊重 max-height 的原因相同，因此会推高表格的大小。

这里有 2 种方法可以使它工作，或者在 child 上设置 position: absolute

#main {
  width: 100px;
  height: 29px;
  position: absolute;
  top: 20px;
  left: 200px;
  border: 1px red dashed;
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
}
#child {
  position: absolute;
  display: table-cell;
}

<div id="main">
  <div id="child">Custom Text With Validation:
  </div>
</div>

或在child 中添加一个额外的元素并在其上设置height。

#main {
  width: 100px;
  height: 29px;
  position: absolute;
  top: 20px;
  left: 200px;
  border: 1px red dashed;
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
}
#child {
  display: table-cell;
}
#child div {
  height: 29px;
}

<div id="main">
  <div id="child">
    <div>Custom Text With Validation:</div>
  </div>
</div>

---

在桌子上添加overflow: hidden 也会正确“切掉”多余的部分。