it-swarm.com.ru

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

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

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

alt text

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

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

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

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

    display: table-cell;
    #display: block;

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

Спасибо!

16
Nikita Rybak

После добавления награды я решил эту проблему, настроив свой CSS на IE8. Я уже использовал технику Пола Ирриша по добавлению классов к элементу <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 */

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

19
Andy E

Используйте 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>
12
Sanooj

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

4
0x4a6f4672
  1. Если text-align: center не работает, вы можете вместо этого попробовать следующее (если у вас нет какой-либо причины, по которой необходимо использовать макет таблицы). Как правило, это предпочтительный метод центрирования любого элемента компоновки блока. Использование выравнивания текста по центру - это запасной вариант, когда это необходимо, но, на мой взгляд, оно менее надежно - его нельзя использовать для вложенных элементов div и т.д.

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
  2. Если вам нужно сделать пользовательское переопределение для IE, самый простой способ - использовать внешнюю таблицу стилей и указать следующее в разделе <head>:

    <!--[if lte IE 8]>
       <link type='text/css' rel='stylesheet' src='link-to-your-source'/>
    <[endif]-->
    

    Поставьте эту таблицу стилей ниже обычной, и она должна переопределить ее. Если это так, вы всегда можете прибегнуть к предоставлению тегов !important в конце операторов, которые необходимо переопределить (хотя всегда желательно избегать этого, если это не является абсолютно необходимым, так как это портит наследование дочерних элементов, и вам постоянно приходится его помнить ). Например:

    .root img {
        text-align: left !important;
        ...
    }
    
2
Chris Krycho

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

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

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

Удачи

0
Sebastjan