Я изменил «строгий» на «переходный», все тот же. Ну, спасибо за попытку!

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

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

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

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

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

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

    display: table-cell;
    #display: block;

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

Спасибо!

 Andy E11 окт. 2011 г., 19:09
+1, просто сам попал в ту же ужасную ошибку!
 Tower01 янв. 2012 г., 01:46
Вы также можете выбрать IE8 с помощьюdisplay: block\9;.

Ответы на вопрос(5)

Решение Вопроса

настроив свой 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 */

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

 Nikita Rybak12 окт. 2011 г., 12:51
Хороший трюк с условными стилями! Как и все удивительные вещи, кажется простым в ретроспективе.

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

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Если вам нужно сделать пользовательское переопределение для 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;
    ...
}
 Chris Krycho05 янв. 2011 г., 21:54
1) Я отметил в кратком тесте, что вы можете использовать обаdisplay: table-cell для элемента контейнера и томуmargin: auto трюк с элементом img. Таким образом, вы могли бы броситьtext-align: center из.root элемент и стильimg прямо вместо. 2) Единственный внутренний взлом IE CSS, который я видел с какой-либо надежностью (хотя мне это не нравится), использует*который яверить все еще работает с IE8. Я также не наблюдаю растяжение, о котором вы сообщаете в IE7, что странно, учитывая, что IE8 неверен.
 Nikita Rybak05 янв. 2011 г., 20:43
2) Я знаю, что на самом деле я искал способ предоставления значений, специфичных для IEвнутри CSS-файл Я не хочу создавать отдельную таблицу стилей для ie (хотя я буду, если это единственный вариант). Вы знаете что-нибудь подобное?
 Nikita Rybak06 янв. 2011 г., 16:34
1) Кажется, это не работает, пока я не удалилdisplay: table-cell (Я попробовал с примером jsfiddle) 2) Спасибо, я попробую это. Что касается ie7, то неудивительно, что поведение совершенно иное: оно должно игнорироватьdisplay: table-cell.
 Nikita Rybak05 янв. 2011 г., 20:42
1) «display: table-cell» - единственный известный мне способ центрировать изображение по вертикали. И если я уберу его, горизонтальное центрирование больше не будет проблемой.

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

 David Oliver09 дек. 2013 г., 16:49
table-layout:fixed кажется, это исправить для меня. Благодарю.

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

Переставить 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>
 Andy E13 окт. 2011 г., 14:41
отличное решение, +1. Поскольку я уже ориентировал CSS на IE 7 и IE 6, я решил просто изменить свой код так, чтобы он был ориентирован на тот же CSS на IE 8, что решило проблему для меня. Иначе я бы точно пошел на это.
 Sanooj12 окт. 2011 г., 11:06
хорошо, я обновилjsfiddle.net/e3cUn/61 , но вам нужно будет использовать span вне изображения. Пожалуйста, проверьте ответ выше его обновленный
 Andy E12 окт. 2011 г., 10:42
Это наполовину решение, но оно не будет сохранять пропорции изображения, когда высота изображения больше его ширины, верно?

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

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

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

Удачи

 Nikita Rybak05 янв. 2011 г., 20:26
Я изменил «строгий» на «переходный», все тот же. Ну, спасибо за попытку!

Ваш ответ на вопрос