Safari不尊重利润

Question

我在OS X上遇到过与Safari不一致的CSS行为。

有时页面加载时不会考虑边距，需要调整窗口大小或刷新才能修复。

我们有一个包含内容的表元素列表。然而，我能够在没有内容的情况下重现问题（请参阅JSFiddle）。我在OS X El Capitan上使用Safari 9.0.1版时遇到了这个问题。

http://jsfiddle.net/p0w8fbdm/

HTML：

<ul class="table-container">
    <li class="row-item"></li>
    <li class="row-item"></li>
    <li class="row-item"></li>
    <li class="row-item"></li>
    <li class="row-item"></li>
    <li class="row-item"></li>
    <li class="row-item"></li>
    <li class="row-item"></li>
    <li class="row-item"></li>
    <li class="row-item"></li>
</ul>

CSS：

.table-container {
    display: block;
    background-color: #e6e6e6;
    padding: 10px;
}

.table-container:after {
   clear: both;
   content: "";
   display: table;
}

.table-container > .row-item {
    background-color: #FFF;
    list-style-position: inside;
    height: 50px;
    border: 1px solid #EEEEEE;    
    float: left;
    margin-right: 2%;
    width: 48%;
    display: table;
    table-layout: fixed;
    margin-bottom: 0.71429em;
}

.table-container > .row-item:nth-child(2n) {
   margin-right: 0;
}

Answer 1

您可以将display: table的{​​{1}}更改为.table-container > .row-item。