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

Question

我有两张图片:

• left.jpgis- 250pxby- 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测试页面.渲染结果存在问题:单元格52px高而不是单元格47px,这会在左侧单元格中的图像下方创建白色条带.

问题:如何制作单元格高度47px,消除白条？谢谢!

更新:这些都没有帮助:

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

Answer 1

图像显示为内联元素,并且在基线下方有一些空白区域.

尝试:

img {
    vertical-align: top;
}

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