Встроенный блок отображения IE

Итак, я так делаю

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />were
  </div>
</div>

Теперь в firefox и chrome он отображается просто отлично, но в Internet Explorer 8 это не так. У них есть макет, так что это не проблема, и ширина достаточно мала, чтобы она соответствовала одной строке.

Если я использую span вместо этого, он действительно работает, однако мне бы очень хотелось, чтобы konw почему div не работает в IE

Ответы

Ответ 1

Старые версии IE не понимают inline-block для элементов блочного уровня.

Причина, по которой inline-block работает для встроенных элементов, заключается в том, что они сделали это, чтобы вызвать hasLayout. И макет для встроенных элементов работает точно так же, как inline-block.

Итак, чтобы сделать inline-block работать с элементами уровня блока, сделать их встроенными и как-то вызвать hasLayout, например, используя zoom: 1.

Итак, для вашего кода существует два способа: изменить div на span s или добавить встроенные хаки (или переместить код во внешние таблицы стилей и использовать условные комментарии). Версия с встроенными хаками будет выглядеть так:

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />were
  </div>
</div>

Ответ 2

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

вы можете добавить встроенный блок для другого браузера, но для IE вы можете добавить стиль с *. он работает только в том случае, если

Ответ 3

Изменение типа документа для IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ответ 4

IE < 8 не может включать элементы block по умолчанию в элементы inline-block. Как бы вы ни старались, они всегда остаются block, если вы не используете float IIRC.

В вашем примере кажется, что вам не нужно использовать <div>. Если это так, почему бы не использовать <span> или элемент inline по умолчанию. В противном случае ответ floating.

Ответ 5

Попробуйте это

<style type="text/css">
.one {
  width: 200px; 
  border: 1px solid black;
}
.two {
  display: -moz-inline-box; 
  display: inline-block; 
  width: 70px; 
  border: 1px solid green;
}
* html .two {
  display: inline;
}
* + html .two {
  display: inline;
}
</style>
<div class="one">
  <div class="two">
    asdfasdf<br />asdf
  </div>
  <div class="two">
    asdfasdf<br />were
  </div>
</div>