CSS Flexbox 适用于除 Safari 之外的所有浏览器？答案

【问题标题】：CSS Flexbox working on all browsers except Safari?CSS Flexbox 适用于除 Safari 之外的所有浏览器？
【发布时间】：2016-06-05 14:48:10
【问题描述】：

所以我正在为一个网站做导航，我正在使用 flexbox，它似乎适用于除 safari 之外的所有浏览器？这是一个常见的问题吗？

#nav ul{
    list-style: outside none none;
    margin: auto;
    padding: 0;
    display:-webkit-box;
    display:-moz-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    width: 96.5%;

}
#nav ul li{
    display: inline-block;
    /*width: 9%;*/
    position: relative;
    -webkit-flex:1;
    -webkit-box:1;
    -moz-flex:1;
    -moz-box-flex:1;
    -ms-flex:1;
    flex:1;

}

【问题讨论】：

caniuse.com/#feat=flexbox - 请显示 MVCE 在 Safari 中未按预期工作
Flexbox code working on all browsers except Safari. Why?的可能重复
safari 是什么版本？显示：-webkit-box；应该在版本 6+ 上工作，您是否尝试检查元素并在 css 规则中查看是否存在渲染问题？
另外，从你的弹性项目中删除display: inline-block。
#nav ul li css 的所有 flex 实体几乎没有感叹号

标签： html css safari navigation flexbox

【解决方案1】：

这似乎解决了我的问题

#nav ul{
    list-style: outside none none;
    margin: auto;
    padding: 0;
    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;
    width: 96.5%;

}
#nav ul li{

    /*width: 9%;*/
    position: relative;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    width: 20%;               /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;

}

【讨论】：