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