itens flutuantes de compensação seletiva no IE7
-
12-12-2019 - |
Pergunta
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/
Solução
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"> </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.