为什么显示：桌子只在safari上打破绝对位置？

Question

它应该如何，并在chrome和firefox上看：

它在野生动物园中的表现：

删除display:table修复了定位，但我需要用于样式（相同大小的标签，无论内容的大小）：

pen

（看起来好像显示：table对codepen中的chrome的定位有一个TINY效果，这在我的应用中并没有发生，但这只会使这更奇怪）

相关代码：

<div class="contain">
  <div class="row">
    <div class="col-md-9">
      <div class="panel profile-header">

        <ul class="nav nav-tabs profile-mobile-tabs row" role="tablist">
          <li role="presentation" class="active col-xs-4"><a>Activity</a></li>
          <li role="presentation" class="col-xs-4"><a>Events</a></li>
          <li role="presentation" class="col-xs-4"><a>Relationships</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>


.contain {
  width: 100rem;
}

.profile-header {
  position: relative;
  padding: 10px;
  background-color: gray;
  margin-bottom: 4rem;
  .row {
    margin: 0;
  }
}


.profile-header > .profile-mobile-tabs {
  display: table;
  table-layout: fixed;
  position: absolute;
  bottom: -2.5rem;
  right: 0;
  width: 100%;
  border: 0;
  background-color: darkgray;
  > li {
    display: table-cell;
    //width: 1%;
    float: none;
    padding: 0;
    > a {
      text-align: center;
      margin: 0;
      border-radius: 0;
      border: 0;
    }
  }
}