css - 如何在``元素中垂直对齐`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;
}