El siguiente CSS funciona bien en Firefox pero no funciona en el navegador IE, ¿por qué?
Además, ¿cómo puedo hacer que solo los elementos, directamente debajo del elemento principal, se vean afectados por CSS?

CSS:

.box{font:24px;}
.box>div{font:18px}
.box>div>div{font:12px;}

HTML:

<div class="box">
   level1
   <div>
      level2
      <div> level3</div>
      <div> level3</div>
   </div>
   <div>
      level2
      <div> level3</div>
      <div> level3</div>
   </div>
</div>