Столкнулся с непонятным багом IE 8 при помещении внутрь элемента с display:table-cell изображения с ограниченной шириной max-width, которое по ширине больше ширины элемента. Блочный элемент растягивается, как будто изображение нормальной ширины.

upd

Задумка была следующая - в блоке заранее заданных размеров размещать изображение с вертикальным и горизонтальным центрированием.

1. Для выравнивания по горизонтали используем css-свойство text-align:center;
2. Для выравнивания по вертикали используется  vertical-align:middle;display:table-cell;
3. Для уменьшения больших изображений (вписываем в блок) max-width и max-height
4. Пункты 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

Там же были найдены варианты “обхода” этого бага:

1.  добавить внешний элемент-обертку (таблица) с фиксированной шириной (display:table;table-layout:fixed;width:XXXpx) равной ширине ячейки (блока display:table-cell)
2. добавить внутренний элемент-обертку изображения с фиксированной шириной, равной максимальной ширине изображения

Обходим расползание элемента 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-позиционирования

Метки: css, верстка

Опубликовано Понедельник, Январь 24, 2011 в 13:45 в следующих категориях: Без рубрики. Вы можете подписаться на комментарии к этому сообщению через RSS 2.0. Вы можете добавить комментарий, или trackback со своего сайта.