html - Internet Explorer 10 中的嵌套块表布局中断

Question

我有嵌套块表。

.cell_group,
.cell_group--root,
.cell_group--nested {
  display: table;
  border-collapse: collapse;
}
.cell_group__row {
  display: table-row;
}
.cell_group__cell,
.cell_group__edge_cell {
  display: table-cell;
  height: 1px;
  box-shadow: inset 0 0 0 1px #f00;
}
.cell_group__edge_cell {
  padding: 5px;
}
.cell_group__wrapper {
  width: 100%;
  height: 100%;
}
.cell_group--nested {
  height: 100%;
}

<div class="cell_group">
  <div class="cell_group__row">
    <div class="cell_group__edge_cell">test</div>
    <div class="cell_group__cell">
      <div class="cell_group--nested">
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
      </div>
    </div>
    <div class="cell_group__cell">
      <div class="cell_group--nested">
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
      </div>
    </div>
  </div>
</div>

在所有主流浏览器中一切正常……但在 IE10 中却不行。中央柱没有填满容器的整个高度并留下空间。如何使中心单元均匀分布到柱的整个高度？

标签： htmlcssinternet-explorer