将div放在IE中的表格单元格内

Question

我想将绝对元素放在相对于它的表格单元格中。它适用于IE以外的所有浏览器。 似乎即使单元格被正确渲染，css中的相对尺寸也不是。 以下是说明错误的简化示例。

＆＃13;

＆＃13;

table {
  width: 100px;
  height: 100px;
  table-layout: fixed;
}

td {
  background-color: #f0f0f0;
  width: 100px;
  height: 100px;
  position: relative;
}

.float {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  background-color: red;
}

＆＃13;

<table>
  <tr>
    <td>
      <div class="float"></div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

预期结果：

实际结果：

有任何线索如何处理？

小提琴：https://jsfiddle.net/e6tc2qk5/6/

Answer 1

你可以用另一个div包装那个div

HTML

<table>
  <tr>
    <td>
    <div class="wrapper">
    <div class="float"></div>
    </div>
    </td>
  </tr>
</table>

CSS

table {
  width: 200px;
  height: 200px;
  table-layout: fixed;
}

td {
  background-color: #f0f0f0;
  width: 100px;
  height: 100px;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aquamarine;
}
.float {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  background-color: red;
}  

http://jsfiddle.net/qn0dwohn/28/

Answer 2

只需改变td的css

td {
  background-color: #f0f0f0;
  width: 100%; // Modified
  height: 100%; // Modified
  display: flex; // Added css
  position: relative;
}