IE CSS дисплей: встроенная блокировка рендеринга - PullRequest
Новая
       1

IE CSS дисплей: встроенная блокировка рендеринга

18 голосов
/ 01 января 2012

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

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, и, видимо, это так.

Ответы [ 6 ]

15 голосов
/ 01 января 2012

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

Похоже, что корректно работает в:

  • Причудливый режим
  • Стандарты 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 о типе документа я добавил полное решение с указанным типом документа.

13 голосов
/ 01 января 2012

Добавьте 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: Проверьте это для получения дополнительной информации,

Редактировать 2: Вы можете прочитать больше о стиле inline-block здесь

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

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

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

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

3 голосов
/ 14 мая 2013

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

  1. hasLayout 

    hasLayout: true;

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

  2. * display 

    *display: inline;
zoom: 1;

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

  3. float 

    float:left;

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

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

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

<?DOCTYPE html>

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

0 голосов
/ 02 апреля 2012 
display: inline;

и 

zoom: 1;

отлично работали

0 голосов
/ 01 января 2012 
div {
    display: block;
    margin-right: 40px;
    float: left;
    border: 1px solid;
}

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

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

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

...