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 来修复它，所需的 margin-bottom 的高度和宽度为 100%