.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和Firefox:
html - IE浏览器的表格单元格中未计算&lt;div&gt;的高度-LMLPHP

IE浏览器:
html - IE浏览器的表格单元格中未计算&lt;div&gt;的高度-LMLPHP

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

最佳答案

我找到的最简单的解决方案是从.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>

关于html - IE浏览器的表格单元格中未计算<div>的高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34545974/

10-12 12:18
查看更多