iPad Air 无法正确显示我的 Foundation 6 网站

Question

我在 Wordpress 网站中使用 Foundation 6。 我面临的问题仅发生在 iPad Air 上。它在较旧的 iPad 和所有其他设备和浏览器上运行良好。 发生的情况是我有 6 个 small-2 列，但最后一列显示在新行中。 我不明白这怎么会发生。

这里是页面：https://lagalope.com/the-collection-2/

这里是html结构：

<div class="row">
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
</div>

当我在 JSFiddle 中重现它时，它工作正常，所以这意味着我的 wordpress 主题有问题...：https://jsfiddle.net/curuba/s5twohf5/2/

[编辑] 当我避免使用 flex-grid 时，它似乎得到了解决。当我评论以下行时，一切都很好：

@include foundation-flex-grid;

我不明白为什么这会导致问题。我让这个问题悬而未决，因为这只是对根本原因的进一步方向，而不是解决方案。

Answer 1

试试这个：

// Fix ios flex bug
.row {
  .column:first-child {
    flex: 1 1 0;
  }
}