列表项的CSS多列布局在Chrome中未正确对齐

前端之家收集整理的这篇文章主要介绍了列表项的CSS多列布局在Chrome中未正确对齐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我建立一个菜单系统以多列格式呈现给用户。 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/

原文链接:/css/220840.html

猜你在找的CSS相关文章