我正在使用 CSS 多列构建一个 2 列布局，我想给出一个关于在何处断开列的提示。
所以我说:columns: 2 在容器上，break-before: column 在我想要中断的子节点上。
IE(在我的例子中是 11)决定将我的内容分成 3 列并溢出到其框的右侧 :-(
Chrome(使用前缀选项 -webkit-columns:2 和 -webkit-column-break-before: always)表现良好。
我是不是做错了什么？
这是 IE 的错误行为吗？
有什么变通建议吗？
最佳答案
因为我自己对这个问题很感兴趣，所以我研究了规范和一些多列布局的例子。
首先我不得不说这个规范非常“不精确”!
但似乎任何中断定义都优先于 column-count 值(尽管我无法在规范或其他任何地方明确找到它)。
只有根据多列 pseudo-algorithm 才会发生这种情况，设置断点的相应元素已经是最后一列的一部分(如您的示例 fiddle )。
The example @GCyrillus 给出的(见问题的评论)只是工作，因为高度设置强制算法首先填充给定的高度，然后在内联方向上创建额外的列框。
如果将高度从 20em 更改为 10em，您可以看到“原始”效果!
所以毕竟，我倾向于说这不是错误，IE 的行为是正确的。
至少不重新计算或重新填充列可能是多列算法的一个错误或缺点，因此尽管有任何中断，列计数值仍得到尊重。从逻辑上讲，只要定义的断点数比列计数值少一个，就可以这样做。
由于 IE 10+ 实际上是唯一支持包含 break-xy 属性的多列模块的浏览器，因此很难判断这种行为是对还是错，以及 future 其他浏览器将如何处理!
目前，我建议根本不要使用这些属性。
关于css - IE(11) CSS 多列处理不当？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22895282/