Flexbox Wrap：Chrome与Firefox

Question

哟！我正在努力让这个（3-3）flexbox布局在Chrome和Firefox上一致显示。

这个codepen在两个浏览器中展示了我想要完成的工作版本（3列和2行）：http://codepen.io/ntdb/pen/rabxzz。这支笔的相关CSS：

*
  box-sizing border-box
.container
  display flex
  flex-wrap wrap
  .item
    display flex
    flex 1 0 33.333%
    flex-direction row
    flex-flow wrap
    justify-content center

此页面包含我项目中的标记和css，并在Firefox中正确显示（3-3）（Mac上为36.0.4）但在Chrome中显示不正确（2-3-1）（41.0.2272.104（64）在Mac上）：http://www.ntdb.net/flexbox

我想也许这种差异可能与子像素渲染有关，但现在我有一个工作版本（codepen）我不再相信情况。任何人都可以在链接页面上找到有问题的标记吗？

我想要的（以及Firefox呈现的内容）：

我在Chrome中拥有的内容：

谢谢！

Answer 1

由您的.course-page .stat-display::before和::after伪元素引起。删除这些（因为在flexbox布局中不需要它们，我假设您使用它们进行浮动清除？）

Answer 2

您可以删除伪元素，也可以将以下类的display属性替换为block或flex

.course-page .stat-display:before, .course-page .stat-display:after {
    display:block; /*Set this property from table to block or flex*/
}