【问题标题】：PureCSS.io - Pure Grid (height) displays different in FirefoxPureCSS.io - 纯网格（高度）在 Firefox 中显示不同
【发布时间】：2016-04-14 16:26:43
【问题描述】：

我正在使用 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 产生相同的输出吗？

【问题讨论】：

这是个好问题。你有一个可以证明问题的最小小提琴，所以我们不能要求更多。只有一件事：您尝试了什么，您使用哪些工具来尝试查明问题？
@MrLister 我使用 jQuery 解决了这个问题，see this JSFiddle。但是我的页面也必须是响应式的。我可以使用$(window).on('resize')，但我宁愿使用更好的解决方案。

标签： css firefox yui-pure-css

【解决方案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://jsfiddle.net/f3YNe/12/

【讨论】：

感谢您的回答！它在 Firefox 中运行良好，但现在 Chrome 是问题所在。使用 flex 使 pure-u-1-3 在 Chrome 32.0.1700.76m 中相互堆叠

【解决方案2】：

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

如果你在 0.6.0 发布之前使用 pure

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

你的 css 应该让你的布局中的东西很好玩。

【讨论】：