Отображение CSS IE: встроенный блок

У меня возникает раздражающая проблема с 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 (ожидаемый дисплей)

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

Я googled, если IE поддерживает отображение: inline-block и, по-видимому, он делает.

Ответы

Ответ 1

Добавьте 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: Вы можете больше узнать о стилевом блоке здесь

Ответ 2

Рабочее решение

Ниже показано, как правильно работать:

Режим Quirks
Стандарты 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. Не отображается правильно (как описано) в режиме quirks.

Тестирование с помощью IE9:

Режим Quirks: заблокирован (неверно)
Стандарты 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, я добавил полное решение с указанным типом doctype.

Ответ 3

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

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

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

Ответ 4

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

hasLayout
```
hasLayout: true;
```
--- Видимо, заставляет IE7 (?) рендеринг следовать правилам компоновки CSS для элемента вместо глобальных правил
* дисплей
```
*display: inline;
zoom: 1;
```
- Звездный хак, который, по-видимому, "трюки", рендерит двигатель, чтобы выровнять div как встроенные элементы
поплавка
```
float:left;
```
- Хороший старый флот, даже IE6 должен его поддерживать, но я не знаю, почему вас беспокоит IE6, хотя статистика китайских браузеров, похоже, указывает на то, что IE6 по-прежнему довольно популярен в Китае, но это может быть уже история как я читал это некоторое время в прошлом году. Лично я считаю, что Северная Корея не должна беспокоиться, но это только я.

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

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

<?DOCTYPE html>

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

Ответ 5

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

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

Ответ 6

display: inline;

zoom: 1;

работал нормально