部分在Safari（Mac）上无法正常显示

Question

HTML：

<section class="HeaderBar">
  <div id="schoolClickDiv" onclick="Sort('School', 'TechnologyProjectPlan')" class="columnHeaderDiv">
    <span id="SchoolArrowTechnologyProjectPlan" class="arrowHidden columnHeaderArrow ui-icon visibilityHidden" style="visibility: hidden;"></span>
    <span>School</span>
  </div>
  <div id="dateClickDiv" onclick="Sort('Date', 'TechnologyProjectPlan')" class="columnHeaderDiv">
    <span id="DateArrowTechnologyProjectPlan" class="arrowHidden columnHeaderArrow ui-icon visibilityHidden" style="visibility: hidden;"></span>
    <span>Date</span>
  </div>
  <div id="StatusClickDiv" onclick="Sort('Status', 'TechnologyProjectPlan')" class="columnHeaderDiv">
    <span id="StatusArrowTechnologyProjectPlan" class="arrowHidden columnHeaderArrow ui-icon visibilityHidden" style="visibility: hidden;"></span>
    <span>Status</span>
  </div>
</section>

现在，除了Mac上的Safari之外，它完全显示在所有内容上。甚至Safari上的Safari也能正确显示。但Mac上的Safari只会渲染该部分的前几个像素。如果我单击该部分，它将显示其余部分。

CSS：

.HeaderBar {
    width: 98%;
    min-height: 20px;
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0.45);
    color: white;
    padding: 4px;
    margin: 5px;
    vertical-align: central;
    border: ridge;
    border-color: #c8c8c8;
    float: right;
    display: table;
}
.columnHeaderDiv {
    display: table-cell;
    text-align: center;
}
.columnHeaderDiv:hover {
    cursor: pointer;
}
.columnHeaderArrow {
    display: inline-block;
}

Mac上的Safari可能不喜欢某些CSS吗？