在li内删除画布下方的空间

Question

  

可能重复：
  Eliminate ghost margin below HTML5 canvas element?

我的DOM类似于：

<ul>
  <li><canvas width="200" height="300" /></li>
</ul>

你可以see it in the jsFiddle。

尽管我已将所有边距和填充值设置为零，但canvas的底部与li的底部之间仍有悬空空间。我已经尝试了很多东西来删除它，显然我错过了一些东西。

Chrome 22，Firefox 15和IE 9之间的行为相同，所以看起来不是一个小问题。

我错过了什么？

Answer 1

将vertical-align:top添加到画布将修复它。

<强> jsFiddle example