Estou criando um sistema de menus apresentado ao usuário em formato de várias colunas. O contagem de colunas propriedade @ no CSS3 me leva a 90% do caminho, mas estou tendo dificuldades com o alinhamento no Chrome.

O menu é relativamente simples:

uma lista não ordenada dividida em várias colunas pelo propriedade de contagem de colunascolumns deve preencher sequencialmente, então preenchimento de coluna: autos itens do menu são representados como itens da list item de lista @each possui uma tag âncora clicável, estendida totalmente viadisplay: block

O problema de alinhamento que estou tendo é mais perceptível com uma borda superior e algumas cores de fundo em cada item da lista. No Firefox, os itens da lista estão sempre alinhados de maneira limpa em cada coluna, nunca sangrando na coluna anterior / próxima. No Chrome, o alinhamento é um crapshoot, variando com quantos itens da lista estão presentes e com quaisquer propriedades de preenchimento / marge

Publiquei o código de um caso de teste simples aqui:http: //pastebin.com/Ede3Jwd

O problema deve ser imediatamente evidente: no Chrome, o primeiro item da lista na segunda coluna volta para a primeira coluna. Ao remover os itens da lista (clique neles), você pode ver que o alinhamento é interrompido ainda mai

Tentei ajustar o preenchimento / margem para os itens da lista sem sucesso: o Chrome parece ter um algoritmo defeituoso de como ele flui conteúdo em um layout de várias coluna

A principal razão pela qual não abandonei a contagem de colunas por completo (em favor da geração manual / Columnizer / etc.) É que o sistema de menus também envolve a funcionalidade de arrastar e soltar em vários submenus e ter os dados do menu como uma hierarquia coesa baseada em lista, cria um código limp

Existe uma maneira de corrigir o problema de alinhamento no Chrome ou devo desistir de contagem de colunas para agora

ADDED:

jsFiddle prototype:http: //jsfiddle.net/VXsAUrotótipo @JS Bin:http: //jsbin.com/ebode5