itens flutuantes de compensação seletiva no IE7

Question

Eu tenho uma lista de 5 itens que flutuam para a esquerda e são exibidos inline.no 4º item, defino à esquerda, fazendo com que o 4º item seja uma nova linha.

Mas no IE7, o 5º item flutua próximo ao 3º item na primeira linha, em vez de flutuar próximo ao 4º item na nova linha.Alguma idéia de como fazer isso funcionar no IE7?

Teste: http://jsfiddle.net/3dSsP/4/

Answer 1

Já me deparei com isso muitas vezes e, infelizmente, a única solução que conheço é ter um elemento de compensação separado para limpar o flutuador.

É feio, mas funciona:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li class="clear">&nbsp;</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

CSS:

.clear{
  display: block;
  float: none;
  clear: both;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
}

As declarações   e font garantirão que o div de compensação tenha apenas 1 pixel de altura, caso contrário, terá a altura do tamanho da fonte atual (oba!).

Como isso é apenas para o IE7, eu manteria sua marcação limpa e adicionaria essa besteira extra dinamicamente com javascript para apenas <IE8.