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