Когда-то я случайно обнаружила, что такие замечательные методы селф-клиаринга как width:100% (для IE) или overflow:hidden, будучи применены к нумерованному списку OL в IE7 и IE6 сбрасывают нумерацию: каждый элемент списка у нас получается под номером 1. Полюбуйтесь сами.

Ну, обнаружила и забыла. А сегодня опять наткнулась на этот идиотский баг и решила все-таки описать находку. Находка печальна — ведь теперь либо придётся обходиться без флотов внутри нумерованного списка, либо клиарить точкой для нормальных браузеров и использовать zoom:1 для IE6.

Upd. Михаил Баранов сообщает нам, что это касается в принципе любого свойства, включающего hasLayout. Можно было догадаться. Что такое hasLayout.

Upd. 2 Panya сообщает нам решение проблемы: display:list-item для LI, и vertical-align:top; им же, чтобы буллит выравнивался по верху. Благодарим!

Комментарии (9) на “Удивительные списки”

  • Комментарий от Михаил, Ноябрь 11th, 2008 в 2:44 дп

    Гораздо печальнее тот факт, что данный баг проявляется и в том случае, если просто задать элементу любое свойство, включающее hasLayout. width, height — не важно. И zoom: 1 — тоже.

  • Комментарий от Engel, Ноябрь 11th, 2008 в 12:19 пп

    Ужасная новость, но все равно спасибо.

  • Комментарий от Marat, Ноябрь 19th, 2008 в 8:33 пп

    А как я в свое время намучался с этим багом!

  • Комментарий от Engel, Ноябрь 19th, 2008 в 8:35 пп

    Марат, придумал что-нибудь?

  • Комментарий от Panya, Декабрь 1st, 2008 в 1:16 дп

    Попробуйте добавить к LI display:list-item; Это вроде как решает проблему. По моим догадкам, придание hasLayout к элементам списка делает их блочными элементами и маркер все равно отображает, но не инкрементирует его.

  • Комментарий от Panya, Декабрь 1st, 2008 в 1:26 дп

    Да еще, чтобы в IE после этого маркер каждого элемента выравнивался по верху достаточно добавить еще vertical-align:top;

  • Комментарий от Михаил, Декабрь 13th, 2008 в 7:15 пп

    @panya, и правда, работает. Спасибо.

  • Комментарий от Максим Покровский, Январь 7th, 2009 в 9:29 пп

    Не сталкивался. Ну буду иметь ввиду.

  • Комментарий от eplatonov, Июль 8th, 2009 в 5:32 пп

    Виновато свойство hasLayout. Чтобы побороть баг необходимо использовать для этого свойства триггеры, а про них больше здесь:http://www.satzansatz.de/cssd/onhavinglayout.html#list

Оставить комментарий