小编Ben*_*n D的帖子

我正在构建一个以多列格式呈现给用户的菜单系统.CSS3中的列数属性让我获得了90%的优势,但我在Chrome下的对齐方面遇到了困难.

菜单相对简单:

• 由列计数属性划分为多列的无序列表
• 列应按顺序填充,因此列填充:auto
• 菜单项表示为列表项
• 每个列表项都有一个可点击的锚标记,通过display:block完全扩展

我所拥有的对齐问题最明显,每个列表项都有一个顶部边框和一些背景颜色.在Firefox中,列表项始终在每列中干净地对齐,从不会流入上一列/下一列.在Chrome中,对齐是一个废话,随着列表项的数量和任何填充/边距属性而变化.

我在这里发布了一个简单测试用例的代码:http://pastebin.com/Ede3JwdG

问题应该立即显而易见:在Chrome中,第二列中的第一个列表项会回流到第一列.当您删除列表项(单击它们)时,您可以看到对齐进一步分解.

我已经尝试调整列表项的填充/边距无济于事:Chrome似乎对于如何在多列布局中流动内容有一个有缺陷的算法.

我没有完全放弃列数(主要是手动生成/ Columnizer /等)的主要原因是菜单系统还涉及跨多个子菜单的拖放功能,并且菜单数据已经布局作为一个基于列表的内聚层次结构,可以实现干净的代码.

有没有办法解决Chrome中的对齐问题,或者我现在应该放弃列数？

添加:

• jsFiddle原型:http://jsfiddle.net/VXsAU/
• JS Bin原型:http://jsbin.com/ebode5/

我在Google Chrome中创建了一个上下文菜单项,如下所示:

chrome.contextMenus.create({
 "title":"My Context Menu Item", 
 "contexts":["editable"], 
 "onclick": onClick
});

该onClick回调接收两个参数:一个OnClickInfo对象和一个标签对象.这两个对象似乎都不包含对调用上下文菜单时右键单击的DOM元素的引用.我有console.logged这两个对象但在任何地方都没有看到对目标元素的任何引用.

期望的结果:

• 用户右键单击可编辑元素
• 用户单击我的上下文菜单项
• 在onClick回调中,让我的扩展名搜索相对于目标右键单击元素的父"form"元素

就目前而言,它看起来并不像Chrome提供对目标元素的任何引用.有没有人找到解决这个限制的方法？