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