Cree un nuevo archivo de prueba HTML simple y pruebe la etiqueta ul li a continuación.
| El siguiente es el contenido citado: <ul> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> </ul> <ul> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> <li><a href="#">Menú 1</a></li> </ul> |
Prueba 1. Defina css como el siguiente código, el efecto es el siguiente
| El siguiente es el contenido citado: ¿Ver copia simple en el portapapeles? cuerpo{font-size:12px;margin:0} ul{estilo de lista: ninguno; margen: 0; relleno: 0; ancho: 120 px;} ul li{fondo:verde;altura:20px;} ul li a{color:#fff;padding:0 0 0 10px;} cuerpo{font-size:12px;margin:0} ul{estilo de lista: ninguno; margen: 0; relleno: 0; ancho: 120 px;} ul li{fondo:verde;altura:20px;} ul li a{color:#fff;padding:0 0 0 10px;} |
Se descubrió que hay un espacio en blanco en el lado izquierdo tanto en IE5 como en IE5.5, y en IE5, el espacio entre líneas entre LI está en blanco, como se muestra a continuación.
Prueba 2. Defina CSS como el siguiente código
| El siguiente es el contenido citado: ¿Ver copia simple en el portapapeles? cuerpo{font-size:12px;margin:0} ul{estilo de lista: ninguno; margen: 0; relleno: 0;} ul li{fondo:verde;alto:20px;ancho:120px;} ul li a{color:#fff;padding:0 0 0 10px;} cuerpo{font-size:12px;margin:0} ul{estilo de lista: ninguno; margen: 0; relleno: 0;} ul li{fondo:verde;alto:20px;ancho:120px;} ul li a{color:#fff;padding:0 0 0 10px;} |
En comparación con la prueba uno, simplemente colocar ancho: 120px desde la definición de ul hasta la definición de li resuelve el problema del espacio en blanco en el lado izquierdo de IE5 e IE5.5, pero todavía hay una brecha entre los li de IE5. Como se muestra a continuación
Prueba 3. Defina CSS como el siguiente código
| El siguiente es el contenido citado: cuerpo{font-size:12px;margin:0} ul{estilo de lista: ninguno; margen: 0; relleno: 0;} ul li{fondo:verde;alto:20px;ancho:120px;vertical-align: abajo;} ul li a{color:#fff;padding:0 0 0 10px;} |
En comparación con la segunda prueba, agregar vertical-align: bottom a la definición de li es normal en IE5, el espacio entre líneas en blanco desaparece y el efecto es el mismo en cada navegador, como se muestra a continuación.
Resumir
1. Cómo resolver el problema de que li genera interlineado en blanco en IE5: si li define un ancho, entonces necesita definir vertical-align: bottom en li;
2. Es mejor no definir el ancho en UL, sino en LI o DIV fuera de UL.
3. La mejor manera de escribir LI es escribir alto y ancho dentro de li, así como vertical-align: bottom (para error ie5/win), o agregar una capa de div fuera de ul y definir el ancho, luego dentro de li; No es necesario definir el ancho y la alineación vertical: inferior; y la visualización será normal (no se generará interlineado en blanco en IE5), pero aún es necesario definir la altura.