El selector de elementos secundarios CSS (>) no funciona con IE

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 padre, se vean afectados por CSS?

CSS:

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

HTML:

 
level1
level2
level3
level3
level2
level3
level3

Internet Explorer admite el selector secundario ( > ) desde la versión 7, pero solo en el modo Estándares. Asegúrese de estar utilizando un Doctype que activa el modo estándar .

Si se dirige a IE6, no tiene suerte. Necesita depender de JS o usar selectores descendientes.

 a>b { foo } 

se convierte

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

El selector de niños no es compatible en absoluto con IE6 y solo parcialmente con IE7.

Quirksmode.org: selector de niños

Tablas de compatibilidad de CSS

lamentablemente, no hay forma de hacer esto, excepto para “desanudar” las definiciones para todos los nietos.

Puedo estar equivocado sobre lo que estás buscando, pero así es como abordaría tu problema:

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

Esto funcionará bien para su ejemplo, sin embargo, tenga en cuenta que si tiene otra .box con div en ella, también se verán afectados.