html - 的高度未在 IE 浏览器的表格单元格中计算

Question

.table {
  display: table;
  width: 10rem;
  background-color: yellow;
}

.table-row {
  display: table-row;
  height: 100%;
  width: 100%;
}

.table-cell {
  display: table-cell;
  height: 100%;
  width: 50%;
  position: relative;
}

.cell-top-div {
  height: 1.5rem;
  border-left: 1rem solid red;
}

.cell-bottom-div {
  position: absolute;
  top: 1.5rem;
  bottom: 0;
  width: 100%;
  border-left: 1rem solid black;
}

.cell-right-div {
  background-color: green;
  height: 5rem;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <div class="cell-top-div">&nbsp;</div>
      <div class="cell-bottom-div">&nbsp;</div>
    </div>
    <div class="table-cell">
      <div class="cell-right-div">&nbsp;</div>
    </div>
  </div>
</div>

Chrome 和火狐浏览器:

互联网浏览器:

cell-top-div 的高度是固定的，而 cell-bottom-div 的高度是可变的，取决于右侧的单元格。我想为 cell-bottom-div 添加左边框，但在 IE 浏览器中高度计算为 0。

Answer 1

我找到的最简单的解决方案是从 .table-cell 中删除 position:relative 并将其添加到 .table。我认为通过这样做，表格确定了高度与表格单元格的高度，表格单元格的高度仅由其内容给出。

.table {
  display: table;
  width: 10rem;
  background-color: yellow;
  position: relative;  
}

.table-row {
  display: table-row;
  height: 100%;
  width: 100%;
}

.table-cell {
  display: table-cell;
  height: 100%;
  width: 50%;
}

.cell-top-div {
  height: 1.5rem;
  border-left: 1rem solid red;
}

.cell-bottom-div {
  position: absolute;
  top: 1.5rem;
  bottom: 0;
  width: 100%;
  border-left: 1rem solid black;
}

.cell-right-div {
  background-color: green;
  height: 5rem;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <div class="cell-top-div">&nbsp;</div>
      <div class="cell-bottom-div">&nbsp;</div>
    </div>
    <div class="table-cell">
      <div class="cell-right-div">&nbsp;</div>
    </div>
  </div>
</div>