My page has a display issue on pageload with Safari (display inline-block element has a width of 0, after one JS inline style its fine). I can fix the issue with this extra style for my span element:
display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix
I have to use at first the standard and after that my fix. On the current browser versions it looks good for FF, IE 9-11, Chrome and Safari (Desktop Mac).
My question is now: Is the order fine or can i get with some browsers a problem? (Maybe browsers think: "Oh I have to make the inline element (span) to display:inline-block". And with the next line "Oh I dont know that property (-webket-inline-flex), so I use the standard display: inline".)
Hopefully you know what I mean? :)
The order is fine, however you will find that any browser which supports -webkit-inline-box will use this over inline-block. This may cause issues as the way the browser-prefixed version is implemented may not reflect how the non-browser-prefixed version is implemented.
For instance, Google Chrome supports -webkit-inline-box and will use this instead of inline-block. Off the top of my head webkit-inline-box is based on the old out-dated version of the Flexbox specification.
Perhaps a better solution would be to work out why Safari is giving your inline-block element a width of 0. This isn't behaviour I've witnessed myself, but Safari usually falls outside of the production browsers I test in.