CSS 子选择器 (>) 不适用于 IE

下面的 CSS 在 Firefox 下运行良好，但在 IE 浏览器下不起作用，为什么？
另外，如何才能只让父元素正下方的元素受 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>

Internet Explorer 支持子选择器 (>）自版本 7 起，但仅限于标准模式。确保您正在使用触发标准模式的 Doctype.

如果你的目标是 IE6 那么你就不走运了。您需要依赖 JS 或使用后代选择器。

a>b { foo }

becomes

a b { foo }
a * b { reverse-of-foo }