我有两张图片:
left.jpg
是 250px
-by- 47px
, right.jpg
是 1px
× 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
,并消除白条?谢谢!更新: 这些都没有帮助:
tbody { height: 47px; }
tr { height: 47px; }
td { height: 47px; }
最佳答案
图像显示为内联元素,并且在基线下方有一些空白。
尝试:
img {
vertical-align: top;
}
见 http://jsfiddle.net/audetwebdesign/RL5AE/
关于html - "img"中的 "td"和 "background-image"中的 "td"具有不同的高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18721016/