Lista con float:left y 3 renglones, problemas en IE

[derkenuke]

Hola:

Mi código HTML es una lista. En total son 11 elementos: los 2 primeros son principales, y luego 9 secundarios. Los principales se muestran como elementos normales de lista (un renglón por elemento), pero los secundarios (con el class junto) se muestran con float:left para que estén en el mismo renglón:

Código HTML:

<ul id="lista">
	<li>especial #1</li>
	<li>especial #2</li>
	<li class="junto">#1</li>
	<li class="junto">#2</li>
	<li class="junto">#3</li>
	<li class="junto nuevaLinea">#4</li>
	<li class="junto">#5</li>
	<li class="junto">#6</li>
	<li class="junto nuevaLinea">#7</li>
	<li class="junto">#8</li>
	<li class="junto">#9</li>
</ul> 

Pero yo quiero que esos elementos secundarios con el class="junto" formen 3 renglones de 3 elementos cada uno. Que el resultado sea este:

Iniciado por Firefox

especial #1
especial #2
#1#2#3
#4#5#6
#7#8#9

Para eso le añado un class nuevaLinea a los elementos que deben empezar un nuevo renglón. El código CSS, que responde bien en Firefox es éste:

Código:

#lista {
	list-style:none;
}
#lista .junto {
	float: left;
}
#lista .nuevaLinea {
	clear: left;
}

Pero en IE sólo saltan a nuevas líneas aquellos elementos que contienen el class nuevaLinea, olvidando a sus hermanos de la derecha:

Iniciado por IE

especial #1
especial #2
#1#2#3#5#6#8#9
#4
#7

¿Qué se puede hacer para mostrarlos en 3 líneas y no perder el significado que una única lista me da semánticamente en el HTML? No puedo meter ningún elemento que no sea <LI> dentro de un <UL>, la especificación me lo impide.

¿Algún hack?