IE / Edge不遵守绝对底线

Question

我的布局相当简单，其他浏览器似乎也不错，但是IE和Edge似乎都忽略了绝对定位div上我的bottom：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上的外观： 它在其他任何地方的外观：