绝对位置底部：0 在 IE 中无法按预期工作

Question

我有一张桌子，放在一个 div 里面。这个表有 4 个 td 元素，在每个 td 元素内，有 3 个 div 从上到下堆叠。我的目标是使第三个 div 位于表格的底部。下面的 CSS：

tr {
  height: 220px;
}

td {
  position: relative;
}

third-div {
  text-align: center;
  position: absolute:
  left: 0;
  right: 0;
  bottom: 0;
}

html image

在 Firefox 和 chrome 中运行良好，但在 IE11 中的 bottom:0 无法正常运行，我遇到了文本覆盖问题：（第三个 div 中的数字，即 2000，未在表格底部设置） html rendered in IE

预期的是： html rendered in Chrome

我尝试将高度设置为 auto/100%，但没有成功。我在开发人员工具中手动单击了底部：0，它起作用了，2000 到了底部。 （不知道为什么）。

Answer 1

div 在 html 中的类名是 third-div，但是您在 CSS 中使用 3rd-div 并且缺少样式规则的选择器。我做了一个如下所示的演示，它可以在 IE 11 和 Chrome 中运行良好：

tr {
  height: 220px;
}

td {
  position: relative;
}

.third-div {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

<table class="table">
  <tbody>
    <tr>
      <td class="col-xs-3"></td>
      <td class="col-xs-3"></td>
      <td class="col-xs-3">
        <div>Amount Financed</div>
        <div>The amount of credit provided to you.</div>
        <div class="third-div">
          <span id="amount">$10,000</span>
        </div>
      </td>
      <td class="col-xs-3"></td>
    </tr>
  </tbody>
</table>