为什么使用 display:flex 时图像不显示在 safari 上； ＆弹性流程：列；并使用 oreder:1/2；在子元素上？
Why the image isn't displayed on safari when using display:flex; & flex-flow:colum; and use oreder:1/2; on child-elements?
这继续我的老post：
我认为你应该阅读它，因为我的页面结构在那里得到了很好的解释。 （还有答案。我保证不会太久）。
我用过：
display: flex;
flex-flow: column;
在容器 div 上，并给它 2 个子元素（一个图像，另一个是 div）：
order: 2;
和
order: 1;
示例：http://jsfiddle.net/fyawuuh1/6/
问题是 - 在 iPhone 上不显示图像。
有什么简单的解决办法吗？
.page-wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
引用自here
看起来您可能遇到了一些跨浏览器问题。您也许能够解决所有这些问题。对于您的 flex 布局系统，请确保您仍然是供应商为这些系统添加前缀，特别是 -wekbit 用于使用 Chrome 和 Safari broswers
示例
display: -wekbit-flex;
-webkit-flex-flow: column;
-webkit-order: 2;
JSFiddle Link - -wekbit 前缀
这继续我的老post：
我认为你应该阅读它，因为我的页面结构在那里得到了很好的解释。 （还有答案。我保证不会太久）。
我用过：
display: flex;
flex-flow: column;
在容器 div 上，并给它 2 个子元素（一个图像，另一个是 div）：
order: 2;
和
order: 1;
示例：http://jsfiddle.net/fyawuuh1/6/
问题是 - 在 iPhone 上不显示图像。
有什么简单的解决办法吗？
.page-wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
引用自here
看起来您可能遇到了一些跨浏览器问题。您也许能够解决所有这些问题。对于您的 flex 布局系统，请确保您仍然是供应商为这些系统添加前缀，特别是 -wekbit 用于使用 Chrome 和 Safari broswers
示例
display: -wekbit-flex;
-webkit-flex-flow: column;
-webkit-order: 2;
JSFiddle Link - -wekbit 前缀