Ячейка таблицы имеет различную высоту в Chrome, если содержимое изображения имеет высоту в десятичных числах

Question

У меня есть таблица с несколькими столбцами. В Chrome высота ячейки таблицы (td) с изображением внутри изменяется, когда высота изображения указана в десятичных числах (например, 76.54px). В Firefox и IE это работает нормально, и все tds имеют одинаковую высоту.

Пожалуйста, смотрите следующую скрипку: https://jsfiddle.net/sstzg0rh/3/

Высота столбца с изображением на несколько точек меньше пикселей, чем у других столбцов. Это отлично работает на Firefox, и все TD имеют одинаковую высоту. Почему chrome показывает другое поведение с высотой столбца и как это исправить

<div class="container-row">
<div class="container">
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Image</th>
                <th>Text</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    ABCDEFG
                </td>
                <td>
                    <img src="http://via.placeholder.com/74x90" alt="This is a no image">  
                </td>
                <td>
                    ABCDEFG
                </td>
            </tr>
            <tr>
                <td>
                    ABCDEFG
                </td>
                <td>
                    <img src="http://via.placeholder.com/74x90" alt="This is a no image">  
                </td>
                <td>
                    ABCDEFG
                </td>
            </tr>
        </tbody>
    </table>
</div>

body {
    line-height: 1.5;
}

img {
    max-width: 72px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

tr {
    min-height: 80px;
    width: 100%;
    border-bottom: 1px solid red;
}

td {
    white-space: nowrap;
    vertical-align: top;
}

Answer 1

Я думал, что ваши img элементы были встроенными элементами, которые привели к проблеме.

Решение, которое я думал, было

img{
display:block;
}