inline-block CSS display causes issue under Safari

I was wondering, how can this fiddle be fixed for Safari? The problem is that on every other browser (in its most up to date version) is displaying the leftout items on the second row centered, but in Safari, all of the items are being displayed on one row exceeding the width of the page.

ul {
    width:100%;
    background:red;
    height:30px;
    text-align:center;
}
li {
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
    background:blue;
    color:white;
    margin-right:10px;
}

I think it has something to do with the inline-block element rendering, but I cant find a way to bypass this.

The original thread is How do I center list items inside a UL element?

Thanks in advance!


Source: css3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.