Internet Explorer 8 игнорирует ширину для элемента display: table-cell

Согласно режиму quirks, Internet explorer 8 поддерживает параметры таблицы для свойства отображения, но в этом примере он проявляет очень странное поведение
http://jsfiddle.net/e3cUn/3/

В обычном браузере внутреннее изображение будет масштабироваться в соответствии с размером поля 150x150 без изменения отношения размеров (растяжения).

Но в IE8 внешний ящик (синий) также будет растягиваться:

1) Вы видели что-нибудь подобное? Кажется, что это связано с text-align:center: удаление этого свойства устраняет проблему, но мне нужно центрировать изображение (по крайней мере, в браузерах, не то есть).

2) Если это невозможно исправить должным образом, как я могу предоставить специальное значение display для IE? Я видел несколько примеров в Интернете, например #display: block;, но все они работают только с IE7.

edit Я знаю о <!--[if IE 8]> и подобных командах для размещения в html, но я действительно искал способ сделать это в файле css. Что-то вроде этого

    display: table-cell;
    #display: block;

Вторая строка не является комментарием, она отменяет предыдущее значение для ie7 и ниже. (но не ie8)

Спасибо!

Ответы

Ответ 1

После добавления награды я столкнулся с этой проблемой, настроив мой CSS на IE8. Я уже использовал Paul Irish метод добавления классов в элемент <html> с помощью условных комментариев:

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Итак, все, что мне нужно было сделать, это добавить дополнительное правило CSS для IE 8 и ниже:

.img-container { display: table-cell; }   /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */

В сочетании с методами для вертикально центрирующих изображений это дает мне хорошее кросс-браузерное решение.

Ответ 2

Используйте width вместо max-width, потому что в ie8 фактическая ширина изображения будет взята для таблицы. Проверьте Fiddle.

Переупорядочить CSS:

.root img {
    width: 130px;
    max-height: 130px;   
}

Обновление

CSS:

.root span {
    width:130px;
    overflow:hidden;
    display:inline-block;
}
.root img {
    max-width: 130px;
    max-height: 130px;
}

HTML:

<div class="root">
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png  /></span>
</div>

Ответ 3

Кажется, что если родительский контейнер элемента display:table-cell имеет атрибут display:table (и a table-layout:fixed), см. этот пример и этот связанный вопрос.

Ответ 4

Если text-align: center не работает, можете ли вы попробовать следующее, вместо этого (если у вас нет причин для использования макета таблицы). Обычно это предпочтительный метод центрирования любого элемента компоновки блоков. Использование центра выравнивания текста является резервным, когда это необходимо, но менее надежным в моем опыте - вы не можете использовать его для вложенных div и т.д.
```
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
```
Если вам нужно выполнить индивидуальное переопределение для IE, самый простой способ - использовать внешнюю таблицу стилей и предоставить следующее в разделе <head>:
```

```
Поставьте эту таблицу стилей ниже обычной, и она должна переопределить ее. Если это так, вы всегда можете прибегнуть к поставке тегов !important в конце инструкций, которые вам нужно переопределить (хотя всегда желательно избегать этого, если это абсолютно необходимо, поскольку это испортит наследование для дочерних элементов, и вам постоянно приходится Запомни). Например:
```
.root img {
    text-align: left !important;
    ...
}
```

Ответ 5

У вас есть тег doctype?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

У меня была одна и та же проблема с IE, которая решила проблему.

Удачи.