Safari和CSS列问题

Question

我正在使用纯CSS和HTML创建项目网格。在Safari中测试时遇到问题。我已将代码提取到CodePen中，其工作方式与我的网格相同。

这是我用来重现此问题的代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  background: WhiteSmoke;
}

.wrapper {
  display: block;
  font: 400 14px/1.3 "Helvetica", sans-serif;
  width: 100%;
  padding: 0 20px;

  @media only screen and (min-width : 768px) {
    column-count: 2;
    font-size: 17px;
    column-gap: 20px;
  }

  @media only screen and (min-width : 992px) {
    column-count: 3;
  }
}

.wrapper > * {
  @media only screen and (min-width : 768px) {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
  }
}

.wrapper > *:last-child {
  margin-bottom: 0;
}

.card {
  box-sizing: border-box;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  border: 1px solid red;
  margin-bottom: 20px;
  padding: 15px;
  font-family: "Helvetica", sans-serif;
}

<div class="wrapper">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
  <div class="card">D</div>
  <div class="card">E</div>
</div>

下面是两个屏幕截图（均在macOS 10.13上拍摄），显示了Chrome和Safari中的不同结果。

问题是Safari似乎将上一项的余量转移到第二栏中。有没有办法强制类似于Chrome的行为？

编辑：

我还应该包括我尝试将.card设置为display: inline-block;的情况，只要这些项目的尺寸相同，就可以在Chrome和Safari中看起来都很好。

下面是另一个屏幕快照，这次比较了Chrome和Safari，其中.card具有display: inline-block;，第一个项目比其余项目大得多。

Answer 1

我的团队也遇到了同样的问题，我们通过在列底部添加额外的div来解决此问题，所需的边距高度为底部，宽度为100％

Answer 2

为了避免添加 html 元素，您还可以在 div 属性后添加 :after 和 display:block。

figure {
     &:after {
            content: "";
            height: 80px;
            display: block;
            @media @mobile {
              height: 40px;
            }
          }
}