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

【问题标题】：Adding aligned image to table cell causes rendering bug in Chrome and Firefox将对齐的图像添加到表格单元格会导致 Chrome 和 Firefox 中的呈现错误
【发布时间】：2013-09-10 06:30:30
【问题描述】：

我在表格单元格中有一个设置为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 是所有事情正确和正确的仲裁者，我肯定做错了什么。但是什么？

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

【问题讨论】：

标签： google-chrome webpage-rendering

【解决方案1】：

只需使用top 而不是text-top。为我工作。另外，你忘记关闭你的图片标签了！

【讨论】：

<image> 是一个 "void" 元素。因此，禁止使用结束标签。 W3C: HTML5 "void 元素只有一个开始标签；不能为 void 元素指定结束标签。" 指定top 有效；尽管应该更新 HTML 规范以指定这种情况的正确行为。
不过，使用<img /> 而不是<img> 似乎更方便（我说的不是结束标签，而是结束标签）。此外，它不再在 jsfiddle 中将其标记为红色（=错误）。