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

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 :Fiddle

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

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

供引用:https://developer.mozilla.org/en/docs/Web/CSS/vertical-align