bloco inline: Firefox 4 vs IE 9

Question

Mar 30, 2011, 08:34 AM

bloco inline: Firefox 4 vs IE 9

Estou confuso por que o IE9 interpreta um comportamento tão básico de uma maneira surpreendente. No Firefox 4 ou Chrome 11, vejo que os divs aparecem lado a lado como eu esperaria. No IE9, porém, vejo os divs aparecendo um sob o outr

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

Estou confiante de que o IE9 é compatível com os padrões, então o que estou perdendo?

Qualquer ajuda seria apreciada

UPDATE: Uau, isso é bizarro. Eu não tinha declaração do DOCTYPE antes. No momento em que adiciono<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> na parte superior da página, o IE9 funciona bem, assim como o Firefox e o Chrome. Alguma idéia do que estava acontecendo antes?