Столкнулся с непонятным багом IE 8 при помещении внутрь элемента с display:table-cell изображения с ограниченной шириной max-width, которое по ширине больше ширины элемента. Блочный элемент растягивается, как будто изображение нормальной ширины.
upd
Задумка была следующая - в блоке заранее заданных размеров размещать изображение с вертикальным и горизонтальным центрированием.
- Для выравнивания по горизонтали используем css-свойство text-align:center;
- Для выравнивания по вертикали используется vertical-align:middle;display:table-cell;
- Для уменьшения больших изображений (вписываем в блок) max-width и max-height
- Пункты 3 и 4 дублируем в отдельный css с использованием expression для ie 6 и подключаем условным комментарием (if lte IE 6)
Изображение с max-width внутри элемента display:table-cell
Такой “трюк” работает во многих (распространенных) браузерах - Firefox, Opera, Safari
Все бы ничего, но IE8 в случае, если изображение больше заданной ширины “растягивает” блочный элемент, как будто ширина изображения не изменяется, но при этом само изображение показывается уменьшенным (с учетом max-width).
В поисках решения, как оказалось, я не первый (мягко говоря - запоздал на пару лет), кто столкнулся с аномальным поведением блоков table-cell, в которых находятся изображения
The cause of this is a bug in IE8’s awesome new standards-supporting rendering engine (sarcasm intended) which, until fixed (if ever), will cause table-cell elements to scale out of proportion like that
Если я правильно понимаю, в IE 8 “новый движок”, который изобилует некоторыми “характерными особенностями” (когда-то искренне наделся, что с выходом IE7 глючность /float 3px, pngfix … / “ослика” будет в прошлом), ан нет:
The following regressions are present in IE 8:
* Min-width on new block formatting context beside a float is sometimes treated as width.
* Percentage width floats cause justified text to move.
* Max-width fails on floats with auto overflow.
* Scrollbar height is added onto max-height instead of subtracted from it.
* Max-height acts as height on elements with scrollbars.
* Combining max-height, float and overflow:scroll will cause the entire page to disappear.
http://bytes.com/topic/html-css/answers/870359-ie8-display-table-cell-max-width-bug
Там же были найдены варианты “обхода” этого бага:
- добавить внешний элемент-обертку (таблица) с фиксированной шириной (display:table;table-layout:fixed;width:XXXpx) равной ширине ячейки (блока display:table-cell)
- добавить внутренний элемент-обертку изображения с фиксированной шириной, равной максимальной ширине изображения
Обходим расползание элемента display:table-cell
upd для IE6 ограничение max-width + max-height обходим с expression:
width: expression(this.width>89&&(89/this.width)< (103/this.height)? 89: true);
height: expression(this.height>103&&(89/this.width)>=(103/this.height)? 103: true);
А вертикальное выравнивание - с помощью inline-позиционирования
