html - Flexbox 包装 : Chrome vs. 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) -bit) 在 Mac 上):http://www.ntdb.net/flexbox

我认为这种差异可能与子像素渲染有关，但现在我有了一个工作版本(codepen)，我不再认为是这种情况。任何人都可以在链接页面上找到有问题的标记吗？

我想要的(以及 Firefox 呈现的):

我在 Chrome 中的内容:

谢谢!

Answer 1

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