title: position:absolute one of display:table-cell elements causes WebKit to render gap
body: <p>I'm trying to build a horizontal menu with the last item seperated and positioned right, so that a logo finds place between the last and the second last item.</p>
  
  <p><img src="https://i.stack.imgur.com/RCQz5.png" alt="That&#39;s the final result"></p>
  
  <p>Firefox, Opera (Presto) and even the dirty ones from Redmond (9.0+) render it like I would expect. But WebKit (Chrome and Safari both render it the same) takes some space after the second last item where the last item would stay without <code>position: absolute</code>.</p>
  
  <pre><code>&lt;header&gt;Logo&lt;/header&gt;
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Statistics&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Data Management&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Market Research&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Web &amp;amp; Apps&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I display the list as <code>table</code> and the list items as <code>table-cell</code> because I want the left part of the menu (first to second last item, left to the logo) to have a fixed width while the items take the width they need for their contents. Text could change to anything. Till there, everything is alright. But if I give the last item a <code>display: block; position: absolute</code>, WebKit renders that gap (white in the example).</p>
  
  <p><img src="https://i.stack.imgur.com/a68ww.png" alt="Left: non webkit; Right: webkit"></p>
  
  <pre class="lang-css prettyprint-override"><code>nav ul
  {
      display: table;
      background: white; /* that's what you see in webkit */
  }
  
  nav ul li
  {
      display: table-cell;
  }
  
  nav ul li:last-child
  {
      display: block; /* "display: none;" works like I would expect */
      position: absolute;
  }
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/3TUk8/" rel="nofollow noreferrer">Fiddle</a>.</p>
  
  <p>I'm not sure if it is a bug in WebKit, because absolute positioning an element inside a table might not be default behavior. On the other hand, <code>display: none</code> works like I would expect. Shouldn't the space consumption be 0 in both cases?</p>
  
  <p>Does anybody know of a bug in WebKit or has anyone an idea of how to prevent that gap?</p>