我建立一个菜单系统以多列格式呈现给用户。 CSS3中的column-count属性得到我的90%的方式,但我有困难的对齐在Chrome下。
菜单比较简单:
>按列计数属性分为多列的无序列表
>列应该顺序填充,所以column-fill:auto
>菜单项表示为列表项
>每个列表项都有一个可点击的锚标签,通过display:block完全扩展
我的对齐问题是最明显的顶部边框和一些背景着色每个列表项。在Firefox中,列表项始终在每个列之间对齐,不会泄漏到上一个/下一个列。在Chrome中,对齐方式是一个问题,随着列表项的数量和填充/边距属性的不同而不同。
我发布了一个简单的测试用例的代码在这里:http://pastebin.com/Ede3JwdG
问题应该立即显而易见:在Chrome中,第二列中的第一个列表项会回到第一列。在删除列表项(单击它们)时,您可以看到对齐进一步细分。
我试图调整列表项的填充/边距无效:Chrome似乎有一个有缺陷的算法,如何流跨多列布局的内容。
我没有完全切换列数的主要原因(有利于手动生成/ Columnizer / etc。)是菜单系统还包括跨多个子菜单的拖放功能,并且具有菜单数据布局作为一个基于列表的层次结构为干净的代码。
有没有办法解决在Chrome中的对齐问题,还是应该立即放弃列计数?
添加:
> jsFiddle原型:http://jsfiddle.net/VXsAU/
> JS Bin原型:http://jsbin.com/ebode5/
解决方法
我已经玩过,以及我在网上看到的几个来源,似乎是一个已知的问题与webkit。可以在这里找到一个很好的故障:
http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
有一天,CSS 3!
也许尝试一个jQuery插件像http://welcome.totheinter.net/columnizer-jquery-plugin/?