css - PureCSS.io - 纯网格(高度)在 Firefox 中显示不同

Question

我正在使用 PureCSS 的纯网格。我有一个包含三个 pure-u-1-3 的 pure-g，其中包含几个段落。问题是当其中一个单位比其他单位长时，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/

这是一个使用你的 fiddle 的例子:http://jsfiddle.net/f3YNe/12/