html - “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 测试页。渲染结果存在问题：单元格是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;