如何在``元素中垂直对齐`inline-block`元素？

Question

我无法在inline-block元素（具有默认<span>样式）内的<td> display: table-cell元素垂直对齐。

两个元素都有固定的大小：<td> is 24px tall and so is the`。

我希望这两个元素具有相同的渲染大小，因为它们都没有边距或填充。然而，似乎<td>比预期更高，我无法弄清楚原因。

此jsfiddle中的示例。

你知道为什么会这样吗？如何“修复”它？

Answer 1

将font-size:0添加到td类

td {
    height: 24px;
    vertical-align: middle;
    background-color: red;
    margin: 0;
    padding: 0; font-size:0
}

更新了演示http://jsfiddle.net/NxmhC/1/

Answer 2

对齐范围：

span.foo {
    display: inline-block;
    height: 24px;
    width: 16px;
    background-color: lime;
    margin: 0;
    padding: 0;
    vertical-align: top;
}