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

【问题标题】：Inline-styled table cell being moved down one pixel内联样式的表格单元格向下移动一个像素
【发布时间】：2014-10-24 10:48:29
【问题描述】：

我使用表格进行语义标记，但将它们设置为类似于左侧带有图标的多行列表：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;
}

【问题讨论】：

检查这个：jsfiddle.net/qs1zsL2s/1

标签： html css html-table cell

【解决方案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

【讨论】：

【解决方案2】：

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

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

fiddle

【讨论】：