10

我正在使用 PureCSS 的纯网格。我有一个pure-gwith three 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 产生相同的输出吗？

4

2 回答 2

7

由于 purecss通过在每个浏览器中实现它来解决问题（v0.6），这个答案已经过时了。

上一个答案：

您的问题是 PureCSS-ms-display: flex在 Internet Explorer 和-webkit-display: flexWebkit 浏览器中使用。Opera、Firefox 和（显然）较旧的 IE 没有得到这个解决方案。

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

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

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

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

于 2014-01-17T12:59:33.400 回答
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应该让你的布局中的东西很好玩。

于 2014-08-28T10:33:17.033 回答