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

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

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

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

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

[html]

[/html]

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

[css]
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
}
[/css]

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

Решение

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

[css]
table{
table-layout: fixed;
width: 200px
}
[/css]

Вот и все.

Модификации

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

[/html]
[css]
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
}
[/css]