встроенный блок: Firefox 4 против IE 9 - PullRequest
Новая
       7

встроенный блок: Firefox 4 против IE 9

7 голосов
/ 30 марта 2011

Я запутался, почему IE9 удивительным образом интерпретирует такое базовое поведение.В Firefox 4 или Chrome 11 я вижу, что div отображаются рядом, как я и ожидал.В IE9, однако, я вижу, что div появляются один под другим. 

<div style='border: black solid 1px'>
   <div style='display: inline-block; width: 10em; height: 1em; background-color: red'>
      block one
   </div>
   <div style='display: inline-block; width: 10em; height: 1em; background-color: green'>
      block two
   </div>
</div>

Я уверен, что IE9 соответствует стандартам, так чего мне не хватает?

Любая помощь будет оценена!

ОБНОВЛЕНИЕ: Вау, это странно.У меня не было декларации DOCTYPE раньше.В тот момент, когда я добавляю <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> вверху страницы, IE9 работает отлично, так же, как Firefox и Chrome.Есть идеи, что это было раньше?

Ответы [ 4 ]

14 голосов
/ 30 марта 2011

Единственное, о чем я могу думать, это то, что IE9 использует представление совместимости (аналогично движку рендеринга IE7, если я не ошибаюсь) для отображения вашей страницы.Если вы отключите представление совместимости, вы увидите, что блоки располагаются горизонтально, как и ожидалось.

Только IE8 и новее имеют полную поддержку display: inline-block.IE7 и старше применяют его к элементам, которые встроены по умолчанию (например, span), а не к любым другим элементам (например, li или div).В результате ваши блочные элементы по-прежнему отображаются как блоки, а не как встроенные блоки.

ОБНОВЛЕНИЕ: Вау, это странно.У меня не было декларации DOCTYPE раньше.В тот момент, когда я добавляю <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> вверху страницы, IE9 работает отлично, так же, как Firefox и Chrome.Есть идеи, что происходило раньше?

Это просто: до того, как вы добавили объявление doctype, IE9 выполнял рендеринг в режиме quirks .В режиме причуд IE обрабатывает display: inline-block так же, как и в более старых версиях, как я объяснил в предыдущем абзаце.Имея объявление doctype, IE9 будет отображаться в стандартном режиме, отображая ваши стили, как и ожидалось.

0 голосов
/ 27 апреля 2013

Чтобы заставить его работать без DOCTYPE (добавление, это не в моем контроле), я должен был использовать следующую css 

<style type="text/css">
        #myulid li{
            display: inline-block;
            width: 100px;
            margin: 10;
            text-align:center;
            vertical-align: top;
        }
    </style>

    <!--[if IE]>
    <style type="text/css">
        /* css for IE */
        #myulid{
            display: block;
        }
        #myulid li{
            display: inline;
        }
    </style>
    <![endif]-->
0 голосов
/ 17 октября 2012

Да, есть некоторые проблемы с IE 9 и отображением: inline-block.Этого можно избежать с помощью знака совместимости, как объясняет BoltClock.Я советую использовать float: left вместо display: inline-block 

 <div style='border: black solid 1px'> 
       <div style='float:left; width: 10em; height: 1em; background-color: red'> 
          block one 
       </div> 
       <div style='float:left; width: 10em; height: 1em; background-color: green'> 
          block two
       </div> 
    </div>

Вы можете найти больше информации о Div в одной строке .

0 голосов
/ 30 марта 2011

Попробуйте следующее, это работает ... 

<div style='border: black solid 1px;display:inline'>
   <div style='display: inline; width: 10em; height: 1em; background-color: red'>
      block one
   </div>
   <div style='display: inline; width: 10em; height: 1em; background-color: green'>
      block two
   </div>
</div>
...