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

【问题标题】："img" in "td" and "background-image" of "td" have different heights“td”中的“img”和“td”的“background-image”具有不同的高度
【发布时间】：2013-09-14 06:53:09
【问题描述】：

我有两张图片：

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; }

【问题讨论】：

你为什么要用一张桌子？！
你想做什么？可能有更简单的方法
在 CSS 中设置<td> 的宽度并给它一个background-image。另外，你做表格的方式是完全错误的，你做渐变的方式是完全错误的。即使您必须支持 IE5，您仍然可以在 background-color 上平铺和垂直重复 background-image。
@ThiefMaster 这是遗留代码。实际代码要复杂得多，我提取了显示问题的最小部分。
将高度设置为td 不起作用，因为表格单元格中的高度被解释为最小值。表格单元格将根据需要垂直扩展以包含其内容。

标签： html css image background-image

【解决方案1】：

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

display: block;
vertical-align: top;
float: left;

我推荐display: block;

【讨论】：

【解决方案2】：

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

试试：

img {
    vertical-align: top;
}

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

【讨论】：