Adding aligned image to table cell causes rendering bug in Chrome and Firefox

Question

I have an image that is set to vertical-align: text-top inside a table cell. In Internet Explorer it renders correctly, but Chrome renders incorrectly:

Internet Explorer 10 (10.0.9200.16660):

Chrome 29 (29.0.1547.66 m):

Updated to include Firefox 23 (23.0.1):

Three browsers, three behaviors; but only IE is what you expect.

You can fiddle the glaving on jsFiddle.

---

The magic ingredient is the image in a table cell:

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

with the cell styled as vertical-align: text-top:

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

The only workaround i've found is removing the vertical-align: text-top. But that causes it to render not how i want:

Since Chrome is the arbiter of all things good and correct, i must be doing something wrong. But what?

Note: The problem is not limited to inline data-uri images. i just use that so the problem is visible on jsFiddle.

Answer 1

Just use top instead of text-top. Works for me. Also, you have forgotten to close your image tag!