it-swarm.com.ru

IE Отображение CSS: проблема рендеринга встроенного блока

У меня раздражающая проблема рендеринга с IEmy код 

CSS:

div {
    display: inline-block;
    margin-right:40px;
    border: 1px solid;
}

HTML:

<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>

Вот как это выглядит в Firefox/Chrome (ожидаемый дисплей)

enter image description here

Вот так это выглядит в IE

enter image description here

Я гуглил, если IE поддерживает display: inline-block, и, видимо, это так.

18
AlanFoster

Добавить DOCTYPE в ваш HTML,

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

Это работает для меня после того, как я добавил это.

Примечание: в jsFiddle DOCTYPE был сгенерирован автоматически, поэтому он будет работать там.

Правка 1: Проверьте это для получения дополнительной информации,

Edit 2: Вы можете узнать больше о стилевом блоке здесь

13
Selvakumar Arumugam

Рабочий раствор

Следующее, кажется, работает правильно в:

  • Причудливый режим
  • IE 7 Стандарты
  • IE 8 Стандарты
  • IE 9 Стандарты
  • Режим совместимости IE 9

<!DOCTYPE html>
<html>
<head>
    <style>

    DIV {
        display: inline-block;
        *display: inline; /* leading asterisk IS correct */
        margin-right:40px;
        border: 1px solid;
        zoom: 1; /* seems to fix drawing bug on border in IE 7 */
    }

    </style>

</head>
<body>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
</body>
</html>

История ответов

http://jsfiddle.net/3sK4S/

У меня отлично работает в режиме стандартов IE9. Не отображается правильно (как вы описали) в режиме причуд.

Тестирование с IE9:

  • Причудливый режим: блок (неверный)
  • Стандарты IE 7: блок (неверно)
  • Стандарты IE 8: встроенный (правильный)
  • Стандарты IE 9: встроенные (правильно)
  • Режим совместимости IE 9: встроенный (правильный)

Чтобы обмануть IE7:

div {
    display: inline-block;
    *display: inline; /* leading asterisk IS correct */
    margin-right:40px;
    border: 1px solid;
}

Взято из этой статьи . У меня работает в режиме эмуляции IE 7.

В комментарии @SKS о doctype я добавил полное решение с указанием типа документа.

15
Tim Medora

Для меня работало добавление этого кода:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

в заголовок информации.

5
maycza

Существуют CSS-хаки для IE, которые работают, но их довольно много:

  1. hasLayout

    hasLayout: true;

    --- Очевидно заставляет рендеринг IE7 (?) Следовать правилам макета CSS для элемента вместо глобальных правил

  2. * дисплей

    *display: inline;
    zoom: 1;
    

    - Звездный хак, который, по-видимому, «обманывает» движок рендеринга, чтобы выстроить элементы в виде встроенных элементов

  3. плавать

    float:left;

    - Старый добрый float, даже IE6 должен его поддерживать, но я не знаю, почему вы должны беспокоиться о IE6, хотя статистика китайских браузеров, похоже, указывает на то, что IE6 все еще довольно популярен в Китае, но это может быть уже историей, как я читал это когда-то в прошлом году. Лично я думаю, что Северная Корея не должна беспокоиться, но это только я.

Однако, кажется, есть еще один способ избежать всех этих взломов в пользу проекта онлайн-кода Google под названием HTML Shim или Shiv. Цель его включения - сделать все версии IE до v9 для поддержки HTML5. Я заметил, что это помогает, и мне не нужно использовать все вышеперечисленное, чтобы заставить работать встроенный блок. Это действительно только в том случае, если вы не возражаете добавить немного JavaScript. С другой стороны, кто обходится без JS в эти дни?

Конечно, есть также режимы совместимости (совместимость) или стандартные режимы, поэтому позаботьтесь о добавлении действительного типа документа для начала. Для HTML5 это проще:

<?DOCTYPE html>

(?) Не знаю, какая версия, но я думаю, что я прочитал 7 в режиме причуд.

3
Shubhojoy Mitra
div {
    display: block;
    margin-right: 40px;
    float: left;
    border: 1px solid;
}

Проблема только с IE7 или более ранней версией, но это исправит это.

0
Rajat Singhal