CSS多列的列表项的布局不会在Chrome中正确对齐 [英] CSS multi-column layout of list items doesn't align properly in Chrome
问题描述
我建立psented以多列格式的用户菜单系统$ P $。在列计数的在CSS3属性获取我90％的方式出现，但我在Chrome浏览器正在与比对的困难。
I am building a menu system presented to the user in multi-column format. The column-count property in CSS3 gets me 90% of the way there, but I'm having difficulties with alignment under Chrome.
菜单比较简单：
- 无序列表由列数的属性分为多个栏目
- 在列应该按顺序填写，这样柱填充：汽车
- 在菜单项重新psented列表项$ P $
- 每个项目都有AA点击锚标记，通过充分伸展的显示：块
- an unordered list divided into multiple-columns by the column-count property
- columns should fill sequentially, so column-fill: auto
- menu items are represented as list items
- each list item has a a clickable anchor tag, extended fully via display: block
我有对齐问题是最明显的一个顶部边框和一些背景各列表项着色。在Firefox中，列表项总是干净排列在每个柱，从来没有出血到previous /下一列。在Chrome中，对齐是有风险，许多列表项是如何present和任何填充/保证金性质不同。
The alignment issue I'm having is most noticeable with a top-border and some background coloring on each list item. In Firefox, the list items are always aligned cleanly across each column, never bleeding into the previous/next column. In Chrome, alignment is a crapshoot, varying with how many list items are present and any padding/margin properties.
我已经张贴了$ C $下一个简单的测试案例在这里： http://pastebin.com/Ede3JwdG
I've posted the code for a simple test case here: http://pastebin.com/Ede3JwdG
的问题，应立即明显的：在镀铬，在第二列中的第一个列表项渗出回到第一列。当你删除列表中的项目（点击它们），您就可以进一步看出，调整休息。
The problem should be immediately evident: in Chrome, the first list item in the second column bleeds back into the first column. As you remove list items (click on them), you can see that alignment breaks down further.
我试着调整填充/保证金的列表项无济于事：Chrome浏览器似乎有一个有缺陷的算法，它是如何流动跨多栏布局含量
I've tried tweaking the padding/margin for the list items to no avail: Chrome appears to have a flawed algorithm for how it flows content across a multi-column layout.
我没有抛弃列计数共主要原因（有利于手工代/ Columnizer /等等）是该菜单系统还包括拖和拖放功能跨多个子菜单，以及具有该菜单奠定了作为一个有凝聚力的名单为基础的层次结构数据使得清洁code。
The primary reason I haven't ditched column-count altogether (in favor of manual generation/Columnizer/etc.) is that the menu system also involves drag-and-drop functionality across multiple sub-menus, and having the menu data laid out as a cohesive list-based hierarchy makes for clean code.
有没有办法在Chrome浏览器修复对齐问题，或者我应该放弃的列计数的现在？
Is there a way to fix the alignment issue in Chrome or should I just give up on column-count for now?
增加：
- 的jsfiddle原型： http://jsfiddle.net/VXsAU/
- JS斌原型： http://jsbin.com/ebode5/
- jsFiddle prototype: http://jsfiddle.net/VXsAU/
- JS Bin prototype: http://jsbin.com/ebode5/
推荐答案
我打得四处为好，我在网上看到几个来源使它似乎是一个已知问题的WebKit。一个好的细分可以在这里找到：<一href="http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/">http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
I've played around as well, and several sources I've seen online make it seem to be a known issue with webkit. A good breakdown can be found here: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
有一天，CSS 3！
也许尝试一个jQuery插件，像<一个href="http://welcome.totheinter.net/columnizer-jquery-plugin/">http://welcome.totheinter.net/columnizer-jquery-plugin/ ？
Maybe try a jQuery plugin like http://welcome.totheinter.net/columnizer-jquery-plugin/ ?
这篇关于CSS多列的列表项的布局不会在Chrome中正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
