Internet Explorer 8 игнорирует ширину для элемента «display: table-cell» - PullRequest
Новая
       1

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

16 голосов
/ 05 января 2011

В соответствии с режимом причуд , Internet Explorer 8 поддерживает опции таблицы для свойства отображения, но в этом примере он демонстрирует очень странное поведение
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)

Спасибо!

Ответы [ 5 ]

19 голосов
/ 12 октября 2011

После добавления щедрости я решил эту проблему, настроив свой 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 */

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

12 голосов
/ 12 октября 2011

Используйте 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>
4 голосов
/ 27 марта 2013

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

2 голосов
/ 05 января 2011

  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;
    ...
}
0 голосов
/ 05 января 2011

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

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

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

Удачи

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...