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

Question

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

时

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

我的儿童元素在Chrome和Safari中正确对齐，但在Firefox中，它们在底部对齐，并且似乎不会对文本的位置产生太大影响。

更新

好的，所以进一步调查，我认为问题是firefox与chrome和safari有不同的计算基线的方法。我基本上放弃了firefox并创建了条件css，当使用firefox并使用基线时它将align-items:flex-start。

Answer 1

Here is my article关于将块与基线对齐。 example for align-items在Fx中正常工作，除了溢出的块和填充的错误，它可以修复的方式与之后修复的方式相同。

但是，对于http://www.nomadto.com/处的示例，情况有所不同：问题在于，当您执行align-items: baseline时，Fx期望内部只能看到内联内容，因此如果您要替换大多数内容嵌套display: flex与display: inline-flex，事情会好得多。但是，由于有很多的额外包装和样式，现在很难为你写一个完整的补丁来修复东西，但如果你在codepen或者某个地方创建一个更简单的例子jsbin，我可以尝试通过适当的基线对齐来解决它。