html - IE/Edge 不考虑绝对底部

Question

我有一个相当简单的布局，其他浏览器似乎做得很好，但 IE 和 Edge 似乎都忽略了我在绝对定位的 div 上的底部：0。我已经搜索了高低并实施了一些我发现的类似问题的建议（即添加 left:0 到绝对元素），但似乎没有任何效果。

任何建议将不胜感激！

.packagebox {
  margin: 0;
  display: table;
  min-height: 500px;
  position: relative;
}

.leftBox {
  width: 40%;
  display: table-cell;
}

.rightBox {
  width: 59%;
  display: table-cell;
  height: 100%!important;
  vertical-align: top;
  position: relative;
}

div.boxCTA {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0px;
}

div.boxCTA a {
  display: table;
  padding: 25px 0;
  width: 100%;
}

<div class="packagebox">
  <div class="leftBox"></div>
  <div class="rightBox">
    <h3 class="packageboxTitle">Lorem Ipsum</h3>
    <p class="price"><span>$100</span> $50 CAD</p>
    <div class="boxlist">
      <ul class="packageboxList">
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
      </ul>
    </div>
    <div class="boxCTA">
      <a href="#">Buy Now & Save</a>
    </div>
  </div>
</div>

它在 IE/Edge 上的样子： 它在其他地方的样子：

标签： htmlcssinternet-explorerpositionabsolute