Встроенный блок IE8 не работает

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

<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>

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

Ответ 1

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

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

Код, который вы вставили, работает в IE8 с этим типом.

Ответ 2

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

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

<!--[if lt IE 8]>
<style type="text/css">
    li { display: inline; }
</style>   
<![endif]-->

Ответ 3

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

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

Ответ 4

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

display: inline-block;
*zoom: 1;
*display: inline;

Ответ 5

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

.divInlineBlock
{
   display: inline-block;
   float: left;
}

Ответ 6

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

IE8 рендеринг как IE7 по умолчанию?

Ответ 7

Для IE8 - вы можете добавить конкретное объявление:

display: inline-table;

который отлично работает.