html - "img"中的"td"和"background-image"中的"td"高度不同

Question

我有两张图片:

• left.jpg是250px -by- 47px ,
• right.jpg是1px -by- 47px .

这些被放入同一表格行的两个单元格中:

• left.jpg进入 <img> 中的左侧单元格标记，
• right.jpg进入正确的单元格，因为它是 background-image .

这是 HTML:

<table>
  <tbody>
    <tr>
      <td><img src="left.jpg" /></td>
      <td background="right.jpg" width="100%"></td>
    </tr>
  </tbody>
</table>  

CSS:

* {
    margin: 0;
    padding: 0;
}

table {
    width: 100%;
    border-bottom: solid 1px black;
    border-collapse: collapse;
}

我做了一个jsfiddle test page .渲染结果有问题:单元格为52px高而不是 47px ，它会在左侧单元格中的图像下方创建一个白色 strip 。

问题:如何让单元格高度为47px ，并消除白色 strip ？谢谢!

更新:这些都没有帮助:

tbody { height: 47px; }
tr { height: 47px; }
td { height: 47px; }

Answer 1

图像显示为内联元素，基线下方有一些空白。

尝试:

img {
    vertical-align: top;
}

参见 http://jsfiddle.net/audetwebdesign/RL5AE/