Box Sizing irregularity in Safari - css

Question

I'm having difficulty getting an <ul> divided evenly in safari so that the inline <li> elements make up 100% of the width.
The html code is basically:
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
<li>orange</li>
<li>purple</li>
</ul>
with css:
ul {
list-style: none;
margin: 0;
padding: 0;
width: 500px;
background-color: #9999ff;
}
li {
text-align: center;
text-decoration: none;
display: inline-block;
border-left: 1px solid #000;
width: 20%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
li:last-child {
border-right: 1px solid #000;
}
It seems like this would make 5 evenly spaces list elements which take up 20% (including borders) of the total width each. Works perfectly in Firefox and Chrome but Safari leaves an extra 6 pixels or so at the end. When I remove the box-sizing property then the list becomes too long. I can't seem to make this simple thing work for the life of me.
Here's JSFiddle: http://jsfiddle.net/z2Xdf/7/

Answer 1

It was rendering the wrong way for me in Chrome...at least using jsFiddle.
Inline-block puts some white space on the sides. Remove from li display:inline block and add
display:block;
float:left;
Also, move your background color to li from ul.
If you wanted to keep display:inline-block, you can apparently do this...
<ul><!-
-><li>stuff</li><!-
-><li>stuff</li><!-
-></ul>
but that seems like a hassle to type?
More "hacks" here (check comments)...