При работе с вложенными списками многие начинающие верстальщики сталкиваются с неожиданной проблемой. Одни и те же правила CSS приводят к двум совершенно разным результатам. Это было бы понятно, если бы один результат принадлежал бы Internet Explorer’у, а второй остальным браузерам – но это не так. Обычно браузеры делятся на две приблизительно равные группы. В чем же дело.

А дело в том, что практически все браузеры содержат в собственной стилевой таблице правило для селектора «ul ul» - то есть правило для списка, вложенного в другой список. Это правило необходимо для того что бы организовать привычный порядок оформления вложенных списков, в котором каждый уровень, кроме первого, имеет отступ.

Однако браузеры организуют этот отступ при помощи разных средств. Часть из них определяет отступ с использованием свойства margin-left (а padding-left имеет значение 0), а часть – с использованием свойства padding-left (и уже margin-left имеет значение 0). Поэтому если задать только padding-left или только margin-left – то результат окажется корректным только в половине случаев.

Вывод – необходимо задавать оба свойства: и padding-left и margin-left. Если есть желание добиться большого совпадения - так же необходимо убедится, что для списков задан шрифт (со всеми прилагающимися свойствами типа курсива, жирности и так далее) и, обязательно, свойство line-height. Последнее важно – так как элементы списка обычно состоят из единственной строки, и разница в ее высоте явно бросается в глаза.