PureCSS.io - 纯网格（高度）在Firefox中显示不同

Question

我正在使用PureCSS的纯网格。我有一个pure-g，其中有三个pure-u-1-3，其中包含几个段落。问题是当其中一个单位比其他单位长时，Chrome / IE和Firefox之间的显示会有所不同。

http://jsfiddle.net/f3YNe/3/

http://i.stack.imgur.com/VFVYu.png

我尝试使用jQuery计算最高pure-u-1-3并将其余部分设置为此高度。但它没有按预期工作，因为这个网格也必须响应（使用pure-g-r）

有人知道如何让Firefox产生相同的输出吗？

Answer 1

由于purecss在每个浏览器中都有fixed the problem（v0.6），所以这个答案已经过时了。

上一个答案：

您的问题是PureCSS在Internet Explorer中使用-ms-display: flex，在Webkit浏览器中使用-webkit-display: flex。 Opera，Firefox和（显然）较旧的IE都无法获得此解决方案。

要让它在Firefox（20+）和Opera中运行，您可以在样式表中应用以下内容：

.pure-g-r {
    display: flex;
}

更多信息：http://css-tricks.com/using-flexbox/

这是一个使用你的小提琴的例子：http://jsfiddle.net/f3YNe/12/

Answer 2

这已被修复并被接受作为pure v0.6.0里程碑的一部分。 修复程序可以在Github上看到：https://github.com/yahoo/pure/pull/351/files。

如果您使用纯0.6.0之前的纯色添加

.pure-g-r {
    display: flex;
    flex-flow: row wrap;
}   

你的css应该让你的布局变得更好。