我们正在尝试创建一个菜单样式的布局。我正在使用css-columns属性来实现列的效果。由于内容是可变的,所以我们希望坚持这个解决方案,因为我们希望浏览器为最佳适应性组织内容。
在下面的示例中,我们在Chrome(版本32.0.1700.77)中看到一些奇怪的行为,在Firefox(版本24.0)中看到一些不同但同样奇怪的问题,因此我认为这是我们的实现问题。
在Chrome中,我们看到第一列下方有一个大的间隙,好像它首先将第三个LI放在那里,然后在渲染过程中的某个时候将其移到第二列的顶部。
在Firefox中,我们看到H3“炒蛋”被留在第一列的底部,而第三个LI的其他内容则移动到第二列的顶部。
实时示例:http://codepen.io/daviddarnes/pen/BeEIp 推测: - 我们在OL内的每个元素上都使用了“break-inside: avoid;”。这可能会导致问题,但我们似乎无法纠正它。 - 基于H3问题...可能与此有关?或者与这个H3标签附近的元素有关。
在下面的示例中,我们在Chrome(版本32.0.1700.77)中看到一些奇怪的行为,在Firefox(版本24.0)中看到一些不同但同样奇怪的问题,因此我认为这是我们的实现问题。
在Chrome中,我们看到第一列下方有一个大的间隙,好像它首先将第三个LI放在那里,然后在渲染过程中的某个时候将其移到第二列的顶部。
在Firefox中,我们看到H3“炒蛋”被留在第一列的底部,而第三个LI的其他内容则移动到第二列的顶部。
实时示例:http://codepen.io/daviddarnes/pen/BeEIp 推测: - 我们在OL内的每个元素上都使用了“break-inside: avoid;”。这可能会导致问题,但我们似乎无法纠正它。 - 基于H3问题...可能与此有关?或者与这个H3标签附近的元素有关。