Создайте новый простой тестовый файл HTML и проверьте тег ul li ниже.
| Ниже приводится цитируемое содержание: <ул> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> </ul> <ул> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> </ul> |
Тест 1. Определите css как следующий код, эффект следующий.
| Ниже приводится цитируемое содержание: просмотреть обычную копию в буфер обмена, распечатать? тело {размер шрифта: 12 пикселей; поле: 0} ul {стиль списка: нет; поле: 0; дополнение: 0; ширина: 120 пикселей;} ул ли {фон: зеленый; высота: 20 пикселей;} ul li a{color:#fff;padding:0 0 0 10px;} тело {размер шрифта: 12 пикселей; поле: 0} ul {стиль списка: нет; поле: 0; дополнение: 0; ширина: 120 пикселей;} ул ли {фон: зеленый; высота: 20 пикселей;} ul li a{color:#fff;padding:0 0 0 10px;} |
Было обнаружено, что слева под IE5 и под IE5.5 есть пустое пространство, а под IE5 межстрочный интервал между LI пуст, как показано ниже.
Тест 2. Определите CSS как следующий код
| Ниже приводится цитируемое содержание: просмотреть обычную копию в буфер обмена, распечатать? тело {размер шрифта: 12 пикселей; поле: 0} ul {стиль списка: нет; маржа: 0; дополнение: 0;} ul li {фон: зеленый; высота: 20 пикселей; ширина: 120 пикселей;} ul li a{color:#fff;padding:0 0 0 10px;} тело {размер шрифта: 12 пикселей; поле: 0} ul {стиль списка: нет; маржа: 0; дополнение: 0;} ul li {фон: зеленый; высота: 20 пикселей; ширина: 120 пикселей;} ul li a{color:#fff;padding:0 0 0 10px;} |
По сравнению с тестовым, простое размещение width:120px; от определения ul до определения li решает проблему пустого пространства в левой части IE5 и IE5.5, но между li в IE5 все еще существует разрыв. Как показано ниже
Тест 3. Определите CSS как следующий код
| Ниже приводится цитируемое содержание: тело {размер шрифта: 12 пикселей; поле: 0} ul {стиль списка: нет; маржа: 0; дополнение: 0;} ul li {фон: зеленый; высота: 20 пикселей; ширина: 120 пикселей; вертикальное выравнивание: снизу;} ul li a{color:#fff;padding:0 0 0 10px;} |
По сравнению со вторым тестом добавьте вертикальное выравнивание: дно к определению li; это нормально для IE5, пустой межстрочный интервал между li исчезает, и эффект одинаков в каждом браузере, как показано ниже.
Подвести итог
1. Как решить проблему, связанную с созданием пустого межстрочного интервала в IE5: если li определяет ширину, вам необходимо определить в liвертикальное выравнивание: дно;
2. Лучше всего ширину определять не в UL, а в LI или DIV вне UL.
3. Лучший способ написать LI — написать высоту и ширину внутри li, а также вертикальное выравнивание: дно (для ошибки ie5/win) или добавить слой div снаружи ul и определить ширину, а затем внутри li. Нет необходимости определять ширину и вертикальное выравнивание: снизу;, и отображение будет обычным (в IE5 пустые строки не будут создаваться), но высоту все равно необходимо определить.