Баг 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>

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

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
    }