PureCSS.io - Чистая сетка (высота) отображает разные в Firefox

Я использую чистые решетки 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 производить один и тот же результат?

Ответы

Ответ 1

Как purecss исправил проблему (v0.6), выполнив ее в каждом браузере, этот ответ устарел.

Предыдущий ответ:

Ваша проблема в том, что PureCSS использует -ms-display: flex в Internet Explorer и -webkit-display: flex в браузерах Webkit. Opera, Firefox и (очевидно) старые IE не получают этого решения.

Чтобы заставить его работать в Firefox (20+) и Opera, вы можете применить следующее в своей таблице стилей:

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

Дополнительная информация: http://css-tricks.com/using-flexbox/

Вот пример использования вашей скрипки: http://jsfiddle.net/f3YNe/12/

Ответ 2

Это исправлено и принято как исправление как часть чистого 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 должно заставить все играть хорошо в вашем макете.