title: display:table in <ul><li> to get vertical-align:middle of <a> item produces Chrome/Chromium issue?
body: <p>On a <code>&lt;nav&gt;</code> bar layout I used <code>display: table</code> on the parent <code>&lt;ul&gt;&lt;li&gt;</code> item and <code>display: table-cell</code> on the child <code>&lt;a&gt;</code> item to be able to use <code>vertical-align: middle</code> on the <code>&lt;a&gt;</code> item. (Some items are multiline, so setting <code>line-height</code> is not a possibility).</p>
  
  <p>On Chrome/Chromium I get the whole <code>&lt;nav&gt;</code> bar 'shifting' to the right when I hover over menu items (only when they have children).</p>
  
  <p>This doesn't happen on Firefox.</p>
  
  <p>Load the jfiddle in both browsers and see: </p>
  
  <p><a href="http://jsfiddle.net/qcQKP/2/" rel="nofollow">http://jsfiddle.net/qcQKP/2/</a></p>
  
  <p>Does anyone have any ideas why this happens? / how to get around it?</p>
  
  <p>Thanks!</p>