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

Question

我在Wordpress网站上使用Foundation 6。 我面临的问题完全发生在iPad Air上。它适用于较旧的iPad和所有其他设备和浏览器。 会发生的是我有6个小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;
  }
}