Баг IE8 при использовании свойств max-width в display:table-cell

Сегодня столкнулся с необычной проблемой. К моему удивлению у IE8 не может правильно обработать свойство max-width для элемента который находится в ячейке таблицы или же в блоке с display:table-cell. И что самое удивительное этот баг не проявляется в IE7, а только в IE8.

А теперь детальнее.

Суть проблемы

Предположим, у нас есть таблица в каждой ячейке которой находится по изображению. Причем картинки разных пропорций и величины. Нам нужно аккуратно их выровнять и вместить в ячейках таблицы, так, чтобы получилась равномерная сетка.

У нас должна получится такая структура (упрощенная):

<table>
    <tr>
        <td>
            <img src="image.jpg" alt="" />
        </td>
    </tr>
</table>

C такими стилями:

table td{
    width: 200px;
    height: 200px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #0F0
    }
table td img{
    max-width: 200px;
    max-height: 200px
    }

И везде все хорошо отображается, даже в IE7. Но в IE8 ячейки таблицы получаются деформированными так, как будто свойство max-width не применяется и картинки имеют свою оригинальную ширину. И что самое интересное, визуально картинки имеют ширину указанную в свойстве max-width. Странно, но факт.
Но, не все потеряно, и решение для такого бага есть.

Решение

Чтобы избавится от этого бага нам всего лишь нужно задать для таблицы ее ширину, а также свойство table-layout fixed:

table{
    table-layout: fixed;
    width: 200px
    }

Вот и все.

Модификации

Если у нас та же самая задача, но мы используем div’ы, то баг в IE8 также проявляется. Решение — аналогичное. В конечном итоге у нас должно получится что-то вроде этого:

<div class="wrapper">
    <div class="inner">
        <img src="image.jpg" alt="" />
    </div>
</div>

div.wrapper{
    display: table;
    table-layout: fixed;
    width: 200px
    }
div.inner{
    display: table-cell;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #0F0
    }
div.inner img{
    max-width: 200px;
    max-height: 200px
    }