内联样式的表格单元格向下移动一个像素

Question

我使用表进行语义标记，但将它们设置为类似于左侧带有图标的多行列表：http://jsfiddle.net/qs1zsL2s/

但是，内联样式的单元格显示为从图标向下一个像素。如何防止这种情况发生，使它们从同一个y位置开始？

HTML:

<table>
    <tbody>
        <tr><td><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 logo"></td><td>First cell</td><td>Second cell</td><td>Third cell</td></tr>
        <tr><td><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 logo"></td><td>First cell</td><td>Second cell</td><td>Third cell</td></tr>
    </tbody>
</table>

CSS：

td {
        display: inline;
        background-color: red;
}
td:first-child {
        display: block;
        float: left;
}
td:last-child {
        display: block;
}
img {
        height: 48px;
}

Answer 1

刚刚更新了你的小提琴：fiddle

只需将vertical-align: top添加到您的td

td {
  display: inline;
  background-color: red;
  vertical-align:top;   
}  

供参考：https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

Answer 2

您可以简单地添加CSS属性position:relative和top:1px:

td:first-child {
    display: block;
    float: left;
    position: relative;
    top: 1px;
}

小提琴