iOS 6的Flexbox问题

我决定在我的项目中使用flexbox，但遇到了一个问题。新语法（基于）

etc似乎在FF26+和Chrome 35+上运行良好。然而，iOS 6.1上的Safari忽略了flexbox。根据一个很好的沙盒，我通过添加特定于供应商的属性，成功地重写了我的SASS mixin，以支持较旧的浏览器版本，但没有任何帮助

比如说

@mixin flexbox-display-row
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

情况很混乱：我可以忽略iOS 6而切换回“新语法”，或者我可以花几个小时来解决“旧/交叉语法”的问题，使其在更多浏览器/版本上工作

这里的灵丹妙药是什么

---

现场示例：

您能创建一个较小的演示吗？一个大到足以重现这个问题吗？@cimmanon示例：。容器应该在中间。关于这个问题，我可以这么说。我猜解决方案存在于特定于供应商的属性和值中……您确实意识到demo缺少webkit的适当前缀，对吗？在现代浏览器中，我也看不到任何以浏览器为中心的内容。我想问题可能是这个：。SASS以某种方式跳过了@if$value=='start'或$value=='end'等条件，因此生成了完全错误的输出。无论如何，我的SASS mixin语法似乎不正确：lowcase OR应该使用，而不是OR。无论如何，谢谢你的帮助；）

@mixin flexbox-display-row
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}