Flexbox Wrap：Chrome與Firefox

喲！我正在努力讓這個（3-3）flexbox佈局在Chrome和Firefox上始終如一地顯示。Flexbox Wrap：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（3-3）在Firefox（36.0.4在Mac），但不恰當的Chrome（2-3 -1）（Mac上爲41.0.2272.104（64位））：http://www.ntdb.net/flexbox~~

我想也許這種差異與子像素渲染有關，但現在我有一個工作版本（codepen），我不再相信就是這樣。任何人都可以在鏈接頁面上找到有問題的標記嗎？

我想要什麼（什麼火狐渲染）：

Working

我在Chrome什麼：

Broken

謝謝！

來源

2015-04-01 ntdb

供參考：您的樣式表丟失 - 它試圖從本地加載本身。 – Adam 2015-04-01 00:12:57

@亞當啊謝謝你，顯然我急於不再想這件事。 :) – ntdb 2015-04-01 00:28:04

這是由您的.course-page .stat-display::before和::after僞元素引起的。刪除這些（因爲它們在flexbox佈局中不需要，我假設您使用它們用於浮動清除？）

來源

2015-04-01 00:43:05 Adam

您可以刪除僞元素，也可以替換display屬性類別阻止或彈性

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

來源

2015-04-01 04:00:58 idzignr

Flexbox Wrap：Chrome與Firefox

回答

相關問題