CSS display:flex align-items:baseline 在 Firefox 中不起作用

Question

我无法在 Chrome、Safari 和 Firefox 之间创建一致的弹性框。我的 css 在 Chrome/Safari 中运行良好，但在 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，我可以尝试修复它以使其在正确的基线对齐下正常工作。