Почему элементы встроенного блока не отображаются правильно в Internet Explorer 8? - PullRequest
Новая
       1

Почему элементы встроенного блока не отображаются правильно в Internet Explorer 8?

15 голосов
/ 15 июля 2011

У меня есть следующий код: 

<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> s, он работает;однако мне бы очень хотелось узнать, почему <div> s не работают в IE.

Ответы [ 5 ]

29 голосов
/ 02 октября 2011

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

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

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

Итак, для вашего кода есть два способа: изменить div s на 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>
3 голосов
/ 15 февраля 2014

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

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

2 голосов
/ 18 сентября 2013

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1 голос
/ 15 июля 2011

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

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

0 голосов
/ 28 сентября 2011

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

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...