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

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，这会在左侧单元格中的图像下方创建一个白色条带。

问题：如何制作单元格高度47px，并消除白条？谢谢！

更新：这些都没有帮助：

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

Answer 1

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

尝试：

img {
    vertical-align: top;
}

请参阅http://jsfiddle.net/audetwebdesign/RL5AE/

Answer 2

图像添加垂直底部填充，以防输入文本。要摆脱这种情况，请在图片中添加以下任一CSS属性：

1. display: block;
2. vertical-align: top;
3. float: left;

我建议display: block;