CSS显示：flex align-items：基准在Firefox中不工作 [英] CSS display:flex align-items:baseline not working in Firefox

问题描述

我无法在Chrome，Safari和Firefox之间建立一致的flexbox。 css我在Chrome / Safari中工作的很好，但Firefox失败。问题是当我尝试有一个容器元素定义为：

I am having trouble creating a consistent flexbox between Chrome, Safari and Firefox. The css I have works great in Chrome/Safari but fails for Firefox. The issue is when I try to have a container element defined as:

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

我的子元素在Chrome和Safari中正确对齐，底部，并且似乎与文本的位置没有太大的影响。

my children elements align properly in Chrome and Safari but in Firefox they are aligned at the bottom and don't seems to have much bearing on the location of the text.

UPDATE

Ok所以进一步调查，我相信问题是firefox vs. chrome和safari有不同的计算基线的方法。我基本上放弃了firefox和创建条件css它将 align-items：flex-start 时使用firefox或否则使用基线。

Ok so having investigated further, I believe the issue is that firefox vs. chrome and safari have a different way of calculating the baseline. I essentially gave up on firefox and created conditional css which will align-items:flex-start when using firefox and otherwise use baseline.

推荐答案

这是我的文章关于将块对齐到它们的基线。 align-items 示例在Fx中运行正常，除了错误

Here is my article about aligning blocks to their baselines. The example for align-items works ok in Fx except for the bug with overflowed block and paddings, which could be fixed in the same way it is fixed a while later.

但是，对于你的例子，在 http://www.nomadto.com/ 事情不同：问题是，当你做 align-items ：baseline ，Fx期望只看到inline-content里面，所以如果你用 display：flex > display：inline-flex 那里，事情会好多了。但是，由于存在很多的额外封装和样式，现在很难为您编写一个完整的补丁来修复内容，但是如果您在代码本上创建一个更简单的示例， jsbin，我可以尝试解决它正确工作与正确的基线对齐。

However, for your example at http://www.nomadto.com/ things are different: the problem is that when you're doing align-items: baseline, Fx expects to see only inline-content inside, so if you'd replace most nested display: flex with display: inline-flex there, things would be much better. However, as there are a lot of extra wrappers and styles, it is rather hard right now to write you a full patch for fixing stuff, but if you'd create a more simple example somewhere at codepen or jsbin, I could try to fix it to work properly with proper baseline alignment.

这篇关于CSS显示：flex align-items：基准在Firefox中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！