Добавление выровненного изображения в ячейку таблицы приводит к ошибке восстановления в Chrome и Firefox

Question

У меня есть изображение, которое установлено в vertical-align: text-top внутри ячейки таблицы. В Internet Explorer это делает правильно, но Chrome делает неправильно:

Internet Explorer 10 (10.0.9200.16660):

Chrome 29 (29.0.1547.66 м):

Обновлено для включения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 является арбитром всех вещей хорошо и правильно, я должен делать что-то неправильно. Но что?

Примечание: Проблема не ограничивается встроенными изображениями данных-uri. Я просто использую это, поэтому проблема видна на jsFiddle.

Answer 1

Просто используйте top вместо text-top. Работает на меня. Кроме того, вы забыли закрыть свой тег изображения!