CSS显示:flex align-items:基线在Firefox中不起作用

Question

我无法在Chrome,Safari和Firefox之间创建一致的Flexbox.我在Chrome/Safari中使用的css非常棒,但Firefox无法使用.问题是当我尝试将容器元素定义为:

.container {
    display: flex;
    align-items: baseline;
}

我的孩子元素在Chrome和Safari中正确对齐,但在Firefox中,它们在底部对齐,似乎对文本的位置没有多大影响.

UPDATE

好的,所以进一步调查,我相信问题是firefox与chrome和safari有不同的计算基线的方法.我基本上放弃了firefox并创建了条件css,这将align-items:flex-start在使用firefox时使用,否则使用baseline.

Answer 1

这是关于将块与基线对齐的文章.对齐项目的示例在Fx中正常工作,除了溢出块和填充的错误,可以修复与稍后修复的相同方式.

然而,在你的榜样http://www.nomadto.com/的东西是不同的:问题是,当你正在做的align-items: baseline,外汇期望看到里面只有内嵌的内容,因此,如果您想更换最嵌套display: flex有display: inline-flex有,事情会好得多.但是,由于有很多额外的包装器和样式,现在很难为你写一个完整的补丁来修复东西,但如果你在codepen或jsbin的某个地方创建一个更简单的例子,我可以尝试修复它与正确的基线对齐正常工作.