Chrome 22: display:table bug?

Original: http://jsfiddle.net/djesse/tzpFm/

by Jens Grochtdreis

HTML

<h1>Containing floats using display:table - be warned</h1>
<p>Trying to contain floats using "display:table" seems to be quite fragile. As you can see in almost any browser, there are situations where the last item is dropped into a new line.</p>

<p>TEST 1: <code>li</code> has 3px margin: <code>ul</code> wrappes list items correctly.</p>
<ul class="px">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

<p>TEST 2: <code>li</code> has 0.3em margin: <code>ul</code> wrappes list items incorrectly. Last item drops into next line.</p>
<ul class="em">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

<p>TEST 3: <code>li</code> has 3% margin: <code>ul</code> wrappes list items incorrectly. Last item drops into next line.</p>
<ul class="percentage">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

CSS

h1 { font-size: 22px; font-weight: bold; margin-bottom: 1em}
p {margin: 0 0 1.5em 0}
ul {
  display:table;
  list-style-type: none;
  margin: 0 0 1em 0;
  outline: 1px #f00 solid;
}
li {
 border: 1px #888 solid;
 padding: 10px;
 float: left;
}
.px li {margin: 0 3px 0 0;}
.em li {margin: 0 0.3em 0 0;}
.percentage li {margin: 0 3% 0 0;}

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}