Вопросы Теги

Многоколоночная компоновка элементов списка CSS не выравнивается должным образом в Chrome

Я создаю систему меню, представленную пользователю в многоколоночном формате. Свойство column-count в CSS3 дает мне 90% пути, но у меня возникают трудности с выравниванием в Chrome.

Меню относительно простое:

  • неупорядоченный список, разделенный на несколько столбцов с помощью свойства column-count
  • , столбцы должны заполняться последовательно, поэтому пункты меню column-fill: auto
  • представлены как элементы списка
  • у каждого элемента списка есть интерактивный тег привязки, полностью расширенный с помощью display: block

Проблема выравнивания, с которой я сталкиваюсь, наиболее заметна с верхней границей и некоторой окраской фона на каждом элементе списка. В Firefox элементы списка всегда аккуратно выровнены по каждому столбцу, никогда не переходя в предыдущий / следующий столбец. В Chrome выравнивание - это мелочь, она зависит от количества присутствующих элементов списка и любых свойств отступов / полей.

Я разместил код для простого тестового примера здесь: http://pastebin.com/ Ede3JwdG

Проблема должна быть очевидна сразу: в Chrome первый элемент списка во втором столбце перетекает обратно в первый столбец. Когда вы удаляете элементы списка (щелкаете по ним), вы можете видеть, что выравнивание еще больше нарушается.

Я безуспешно пытался настроить отступы / поля для элементов списка: похоже, что в Chrome есть ошибочный алгоритм того, как он перемещает контент по многоколоночной структуре.

Основная причина, по которой я вообще не отказался от подсчета столбцов (в пользу создания вручную / Columnizer и т. д.), заключается в том, что система меню также включает в себя функцию перетаскивания через несколько подменю, а данные меню представлены в виде единой иерархии на основе списков, что позволяет получить чистый код.

Есть ли способ исправить проблему с выравниванием в Chrome, или мне просто нужно отказаться от столбца - count сейчас?

ДОБАВЛЕНО:

49
задан TylerH 24 August 2017 в 06:09
поделиться