Bem, deixe-me começar com algumas observações irrelevantes. Meu trabalho recente me proporcionou muitas oportunidades práticas e também muitos ganhos. Ao conversar no grupo, também mencionei que o melhor processo de aprendizagem é teoria-prática-depois teoria-e depois prática. . . um processo cíclico. A teoria mencionada aqui é um conceito relativamente amplo, incluindo teoria de livro e resumo da prática. Somente a teoria sem prática muitas vezes resulta em altivez e baixo poder, pensar bem, mas agir mal, praticar cegamente sem aprender e resumir por meio da teoria parecerá uma atividade ocupada, mas no final você estará de mãos vazias;
Na prática recente, sinto cada vez mais que será mais problemático quando o elemento li contém um elemento img e preciso prestar atenção a isso. É claro que o problema ainda ocorre no IE, como sempre. O seguinte é um exemplo:
HTML
<ul>
<li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
</ul>
CSS
ul{
largura: 280px;
}
Ulli{
exibição: bloco;
altura:57px;
largura:277px;
}
O tamanho de temp.jpg é 277×57
Comportamento normal no Firefox:
Desempenho anormal no IE6:
É óbvio que no IE, a altura de desempenho de li não é os 57px que definimos, mas é maior que isso. Isso ocorre porque há 5px extras de espaço em branco abaixo do img.