IE浏览器中的表格单元格中未计算<div>的高度

Question

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Chrome＆amp;火狐：

Internet Explorer：

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>