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（Mac 上的 36.0.4）中正确显示 (3-3)，但在 Chrome (2-3-1) (41.0.2272.104 (64-bit) on Mac): http://www.ntdb.net/flexbox

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

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

我在 Chrome 中有什么：

谢谢！

Answer 1

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

Answer 2

你可以去掉伪元素也可以把后面class的显示属性换成block或者flex

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

Flexbox Wrap：Chrome 对比 Firefox

Flexbox Wrap: Chrome vs. Firefox

html

css

flexbox