Flexbox包装：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（在Mac上为36.0.4）上正确显示（3-3），在Chrome（2-3-1）（在Mac上为41.0.2272.104（64位））上显示不正确： http ： //www.ntdb.net/flexbox

我以为这种差异可能与亚像素渲染有关，但是现在我有了一个工作版本（codepen），我不再相信这种情况了。 谁能在链接页面上找到有问题的标记？

我想要的（以及Firefox渲染的）：

我在Chrome中拥有的功能：

谢谢！

Answer 1

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

Answer 2

您可以删除伪元素，也可以替换以下类的display属性以阻止或伸缩

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