将对齐的图像添加到表格单元格会导致Chrome和Firefox中出现错误

Question

我在表格单元格中设置了一个vertical-align: text-top的图像。在Internet Explorer中，它可以正确呈现，但Chrome呈现错误：

Internet Explorer 10 （10.0.9200.16660）：

Chrome 29 （29.0.1547.66 m）：

已更新以包含 Firefox 23 （23.0.1）：

三种浏览器，三种行为;但只有IE才是你所期望的。

你可以fiddle the glaving on jsFiddle。

---

神奇的成分是表格单元格中的图像：

<td class="c1" rowspan="3">
   <img src="data:image/png;base64,iVBORw0KGgoAAA....">
</td>

将单元格设为vertical-align: text-top：

<style type="text/css">
   .c1 {vertical-align: text-top; }
</style>

我发现的唯一解决方法是删除vertical-align: text-top。但这导致它不是我想要的：

由于Chrome是一切美好和正确的仲裁者，因此我必须做错事。但是什么？

注意：问题不仅限于内联数据图像。我只是使用它，所以问题在jsFiddle上可见。

Answer 1

只需使用top代替text-top。适合我。此外，您忘记关闭图片标记了！