Css 为什么显示：表仅在safari上打断绝对位置？

在chrome和firefox上的外观和外观：

它在safari上的外观：

删除

display:table

修复了定位，但我需要它来设置样式（无论内容大小，标签大小相同）：

（这看起来确实像是显示器：桌子对chrome在codepen中的定位有着微小的影响，这在我的应用程序中没有发生，但这只是让这变得更加奇怪）

相关代码：

<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;
    }
  }
}

活动
事件
关系

.包含{
宽度：100雷姆；
}
.个人资料标题{
位置：相对位置；
填充：10px；
背景颜色：灰色；
边缘底部：4rem；
.行{
保证金：0；
}
}
.profile头>.profile移动选项卡{
显示：表格；
表布局：固定；
位置：绝对位置；
底部：-2.5雷姆；
右：0；
宽度：100%；
边界：0；
背景色：暗灰色；
>李{
显示：表格单元格；
//宽度：1%；
浮动：无；
填充：0；
>a{
文本对齐：居中；
保证金：0；
边界半径：0；
边界：0；
}
}
}

@G-Cyr您能详细介绍一下重新设置边框折叠/边框间距的方法吗？我试着在个人资料移动标签上玩它，但它似乎没有任何作用。如果可以的话，我宁愿避免使用flexbox。不幸的是，没有变化，无论如何谢谢。好吧，太糟糕了。您最终可能会同时使用这两种显示器。若不理解flex，则由表接管。在理解flex的地方，flex子对象是flex子对象，无论其显示或浮动行为如何。（

.profile header>.profile移动选项卡{display:table；/*或*/display:flex；/*如果理解*/..

）应该足够通过safari和ol IE测试行为了。@G-Cyr你能详细说明一下边界折叠/边界间距的重置吗？我尝试在个人资料移动选项卡上使用它，但它似乎没有任何作用。如果可以的话，我宁愿避免使用flexbox。不幸的是，没有任何更改，谢谢。好吧，太糟糕了。你甚至可能会这样做实际使用两种显示方式。如果不理解flex，则使用表。如果理解flex，则flex子项是flex子项，无论其显示或浮动行为如何。（

.profile header>.profile mobile tabs{display:table；/*或*/display:flex；/*如果理解*/..

）应该足以通过safari和ol IE测试行为。