Articoli flottanti selettivi di compensazione in IE7
-
12-12-2019 - |
Domanda
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?
Soluzione
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"> </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