如何在`內部垂直對齊`inline-block`元素 <td> `元素？

Question

我無法在<td>元素（具有默認display: table-cell樣式） inline-block垂直對齊inline-block <span>元素。

兩個元素都有固定的大小： <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;
}