Articoli flottanti selettivi di compensazione in IE7

Question

Ho un elenco di 5 articoli che sono flottati a sinistra e visualizzati in linea. Sul 4 ° articolo, ho impostato a sinistra chiarisca, causando così il 4 ° articolo in una nuova riga.

Ma in IE7 il quinto oggetto galleggia accanto al 3 ° articolo sulla prima riga invece di galleggiare accanto al 4 ° articolo sulla nuova riga.Qualche idea come far funzionare questo per IE7?

Test: http://jsfiddle.net/3dssp/4/

Answer 1

Ho incontrato queste volte molte volte e sfortunatamente l'unica soluzione con cui sono consapevole è avere un elemento di compensazione separato per cancellare il galleggiante.

È brutto ma funziona:

<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;
}

.

Le dichiarazioni del carattere garantiranno il div di compensazione è alto solo 1 pixel, altrimenti sarà l'altezza della dimensione corrente del carattere (yay!).

Poiché questo è solo per IE7, manterrei il tuo markup pulito e aggiungerei in questo GUF in più in modo dinamico con JavaScript per Just