Crie um novo arquivo de teste HTML simples e teste a tag ul li abaixo.
| A seguir está o conteúdo citado: <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> |
Teste 1. Defina css como o código a seguir, o efeito é o seguinte
| A seguir está o conteúdo citado: visualizar cópia simples para impressão da área de transferência? corpo{tamanho da fonte:12px;margem:0} ul{estilo de lista:none;margem:0;preenchimento:0;largura:120px;} ul li{fundo:verde;altura:20px;} ul li a{cor:#fff;preenchimento:0 0 0 10px;} corpo{tamanho da fonte:12px;margem:0} ul{estilo de lista:none;margem:0;preenchimento:0;largura:120px;} ul li{fundo:verde;altura:20px;} ul li a{cor:#fff;preenchimento:0 0 0 10px;} |
Verificou-se que há um espaço em branco no lado esquerdo tanto no IE5 quanto no IE5.5, e no IE5, o espaçamento entre linhas entre LI está em branco, conforme mostrado abaixo
Teste 2. Defina css como o seguinte código
| A seguir está o conteúdo citado: visualizar cópia simples para impressão da área de transferência? corpo{tamanho da fonte:12px;margem:0} ul{estilo de lista:none;margem:0;preenchimento:0;} ul li{fundo:verde;altura:20px;largura:120px;} ul li a{cor:#fff;preenchimento:0 0 0 10px;} corpo{tamanho da fonte:12px;margem:0} ul{estilo de lista:none;margem:0;preenchimento:0;} ul li{fundo:verde;altura:20px;largura:120px;} ul li a{cor:#fff;preenchimento:0 0 0 10px;} |
Comparado com o teste um, apenas colocar width:120px da definição de ul para a definição de li resolve o problema do espaço em branco no lado esquerdo do IE5 e IE5.5, mas ainda há uma lacuna entre o li do IE5. Como mostrado abaixo
Teste 3. Defina css como o seguinte código
| A seguir está o conteúdo citado: corpo{tamanho da fonte:12px;margem:0} ul{estilo de lista:none;margem:0;preenchimento:0;} ul li{fundo:verde;altura:20px;largura:120px;alinhamento vertical: inferior;} ul li a{cor:#fff;preenchimento:0 0 0 10px;} |
Em comparação com o segundo teste, adicione vertical-align: bottom à definição de li, é normal no IE5, o espaçamento entre linhas em branco entre li desaparece e o efeito é o mesmo em cada navegador, conforme mostrado abaixo;
Resumir
1. Como resolver o problema de que li gera espaçamento entre linhas em branco no IE5: Se li define uma largura, então você precisa definir vertical-align: bottom em li;
2. É melhor não definir a largura em UL, mas em LI ou DIV fora de UL.
3. A melhor maneira de escrever LI é escrever altura e largura dentro de li, bem como vertical-align: bottom (para bug ie5/win), ou adicionar uma camada de div fora de ul e definir a largura, depois dentro de li Não há necessidade de definir a largura e o alinhamento vertical: inferior;, e a exibição será normal (nenhum espaçamento entre linhas em branco será gerado no IE5), mas a altura ainda precisa ser definida.