O CSS a seguir funciona bem no firefox, mas não no navegador IE, por quê?
Além disso, como posso fazer com que apenas os elementos diretamente abaixo do elemento pai sejam afetados pelo 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>