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

我在表格单元格中有一个设置为

垂直对齐：text top

的图像。在Internet Explorer中，它正确渲染，但Chrome渲染不正确：

Internet Explorer 10（10.0.9200.16660）：

铬29（29.0.1547.66米）：

更新为包括Firefox 23（23.0.1）：

三个浏览器，三种行为；但你所期望的只有IE

你可以

---

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

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

我找到的唯一解决方法是删除

垂直对齐：文本顶部

。但这导致它呈现的不是我想要的：

既然Chrome是所有好的和正确的事物的仲裁者，我一定是做错了什么。但是什么呢

---

注意：问题不仅限于内联数据uri图像。我只是使用它，这样问题就可以在JSFIDLE上看到。

只需使用

top

而不是

text-top

。对我有用。此外，您忘记关闭图像标签

只需使用

top

而不是

text top

。对我有用。此外，您忘记关闭图像标签

是一个“void”元素。因此，禁止使用收尾标签。“无效元素只有开始标记；不能为无效元素指定结束标记。”指定

top

有效；尽管HTML规范应该更新以指定这种情况下的正确行为。但是，使用

而不是

似乎更方便（我不是说关闭标记，而是关闭标记）。而且，它不再在JSFIDLE中将其标记为红色（=错误）。

是一个“void”元素。因此，禁止使用收尾标签。“无效元素只有开始标记；不能为无效元素指定结束标记。”指定

top

有效；尽管HTML规范应该更新以指定这种情况下的正确行为。但是，使用

而不是

似乎更方便（我不是说关闭标记，而是关闭标记）。而且，它不再在JSFIDLE中将其标记为红色（=错误）。

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