IE8 дисплей встроенный блок не работает - PullRequest
49 голосов
/ 02 февраля 2012

Скажите, у меня есть следующий код

<style type="text/css" media="all">
  span, ul, ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    list-style: none;
  }   
</style>
<span>i would want</span>
<ul>
  <li>this</li>
  <li>on</li>
  <li>one line.</li>
</ul>

Я хочу, чтобы это отображалось в IE8. Везде, где я читал, все говорит, что это должно работать, IE8 поддерживает inline-block. Однако после утра попыток я не могу заставить вышеупомянутое выстроиться в линию. Я знаю, что мог бы это всплыть, но с другими элементами на моей странице (не показанными здесь) мне нужно было бы использовать 'clearfix', который более размечен. Мне нужно только нацелиться на IE8, и я хотел бы знать, почему встроенный блок не работает для меня, когда, очевидно, его поддерживает. Приведенный выше код делает то, что я хочу при просмотре в Google Chrome.

Ответы [ 7 ]

50 голосов
/ 02 февраля 2012

Полагаю, вы еще не объявили тип документа. Попробуйте поместить это в первую строку перед тегом html:

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

Вставленный код работает в IE8 с этим типом документа.

37 голосов
/ 21 февраля 2012

Не все версии IE8 работают одинаково.Я обнаружил, что данный код, даже с DOCTYPE, не работает в IE 8.0.6001.18702, который является более ранней версией.

Однако обходной путь для более низких версий IE работал на этом конкретном IE 8 какскважина:

<!--[if lt IE 8]>
<style type="text/css">
    li { display: inline; }
</style>   
<![endif]-->
18 голосов
/ 24 февраля 2012

Вы можете установить margin-right: 1px

работал для меня очень хорошо.

13 голосов
/ 14 ноября 2013

По моему опыту, всегда лучше использовать универсальный способ (IE6 +) объявления встроенного блока. Даже если вы нацеливаетесь на новые браузеры каждый раз, когда я пытался сказать, что он поддерживается только новыми браузерами, некоторые клиенты все еще портят свой тип документа, а затем говорят, что его нужно исправить, потому что клиенты все еще могут его видеть и не понимает, что дело в настройках IE, а не по нашей вине. Более того, когда вы используете встроенные блоки для структурных вещей, он не дает сайту полностью распасться, если пользователь просматривает сайт в более старом IE по какой-либо причине.

display: inline-block;
*zoom: 1;
*display: inline;
9 голосов
/ 30 ноября 2012

IE8 будет рассматривать его как элемент уровня блока, если вы не используете float.

.divInlineBlock
{
   display: inline-block;
   float: left;
}   
5 голосов
/ 15 февраля 2013

Обратите внимание, что IE8 будет работать как IE7, если вы просматриваете сайт интрасети, что может произойти по мере разработки! Посмотрите этот вопрос StackOverflow:

IE8 отображается как IE7 по умолчанию?

3 голосов
/ 28 августа 2012

Для IE8 - вы можете добавить специальную декларацию:

display: inline-table;

, которая прекрасно работает.

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