CSS Flexbox working on all browsers except Safari?

Question

So I'm working on a navigation for a website, and I'm using flexbox, which seems to work on all browsers except safari? is this a common issue?

#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;

}

http://caniuse.com/#feat=flexbox - please show a MVCE not working as expected in Safari — Fabrizio Calderan, Feb 23 '16 at 16:39
Possible duplicate of [Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why) — Michael Benjamin, Feb 23 '16 at 16:41
What version is safari? display: -webkit-box; should work on versions 6+, did you try to inspect the element and see in the css rule if there are rendering issues? — peterpeterson, Feb 23 '16 at 16:41
I'm getting little exclamation marks against all the flex entities for the #nav ul li css — EwaCas, Feb 23 '16 at 17:01

score 1 · Answer 1 · answered Feb 23 '16 at 17:23

This seemed to fix my issues

#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;

}

CSS Flexbox working on all browsers except Safari?

1 Answers1