元素为25%时Safari显示弹性不起作用

Question

我们在iPad和Mac上遇到了一个问题,我们真的很讨厌.

我们正在使用bootstrap,并使用.col-xs-12.col-sm-5.col-md-3类在.row中创建了9个元素.

在.row上我们使用以下css应用了.flex-start类:

.flex-start {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

在safari中,第一个弹性行仅包含3个项目.

这里的示例和截图在这里.你必须在Mac或iPad上进行野生动物园游戏

将col-md-3的宽度设置为24.9%可以解决这个问题,但我们不希望这样.

有没有其他人遇到这个问题,并知道修复？

Answer 1

我最近遇到了同样的问题.伪:after和:before行与类一起出现问题.

我认为omittig行类并不是最好的解决方案.在我的情况下,我可以使用此css在safari中修复它:

.row:before,
.row:after {
    display: none;
}

你可能也看看这篇文章:

Flexbox Safari bug(flex-wrap)