哟!我正在努力让这个 (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 中的内容:
谢谢!
最佳答案
这是由您的 .course-page .stat-display::before
和 ::after
伪元素引起的。删除它们(因为在 flexbox 布局中不需要它们,我假设您使用它们是为了清除 float ?)
关于html - Flexbox 包装 : Chrome vs. Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29380591/