IE（11）不正确处理CSS多列？ [英] IE (11) improper handling of CSS multi-columns?

问题描述

我正在使用CSS多列创建一个2列布局，我想给出一个提示，指明在哪里打破列。

例如：列：2 在容器上， break-before：column

IE（我的例子中为11）决定将我的内容拆分为3列，并在其框右边溢出： - （

Chrome（使用前缀替代 -webkit-columns：2 和 -webkit-column-break-before：always <

小提琴： http://jsfiddle.net/jDecq/6/

我在这里做错了吗？

这是否是IE的不当行为？

任何解决方法建议？

解决方案

由于我对这个问题很感兴趣，所以我研究了这个spec和一些多列布局的例子。

首先我要说的是spec是可怕的不精确！

但是似乎任何break定义优先于 column-count 值（虽然我不能明确地找到它规范或任何其他地方）。

这只会发生，如果根据多列伪算法，设置断点的相应元素已经是最后一列的一部分（如示例中的小调）。

由@GCyrillus提供的示例（请参阅评论有问题）只是工作，因为高度设置强制算法首先填充给定的高度，然后在内联方向创建其他列框之前。

如果您更改高度从20em到10em！

毕竟，我倾向于说这不是一个错误，IE行为正确。

至少可能是多列算法的一个错误或缺点是不重新计算或重新填充列，以便尽管有任何中断，列计数值也会被遵守。逻辑上，只有定义的断点数量小于列计数值，才能执行此操作。

实际上，IE 10+是唯一支持多列模块包含break-xy属性，很难判断行为是正确的还是错误的，以及其他浏览器将来会如何处理这些行为！

现在，我建议不要使用这些属性。

I'm building a 2-column layout using CSS multi-columns, and I want to give a hint as to where to break the columns.

So I say: columns: 2 on the container, and break-before: column on the child where I want the break.

IE (11 in my case) decides to split my content into 3 columns and overflows to the right of its box :-(

Chrome (using the prefixed alternatives -webkit-columns:2 and -webkit-column-break-before: always) behaves nicely.

Fiddle at: http://jsfiddle.net/jDecq/6/

Am I doing something wrong here ?

Is this a misbehavior of IE ?

Any workaround suggestions ?

解决方案

As I am myself very interested in this question I studied the spec and some examples of multi-column layouts.

First I have to say that the spec is horribly "imprecise"!
But it seems that any break definition has precedence over the column-count value (though I could not find it explicitly in the spec or anywhere else).

This only happens if, according to the multi-column pseudo-algorithm, the respective element, which sets the break point, is already part of the last column (as in your example fiddle).

The example given by @GCyrillus (see comments on question) just works, because the height setting forces the algorithm to first fill the given height before additional column boxes are created in the inline direction.
You can see the "original" effect, if you change the height from 20em to 10em!

So after all, I tend to say that it is not a bug and IE behaves correctly.

At least it might be an error or shortcoming of the multi-column algorithm to not recalculate or refill the columns so that despite any breaks the column-count value is respected. Logically this can only be done as long as the number of defined break points is one less than the column-count value.

As actually IE 10+ is the only browser supporting the multi-column module including the break-xy properties, it is hard to tell if the behaviour is right or wrong and how other browsers will handle this in the future!

For now, I would recommend to not use these properties at all.

这篇关于IE（11）不正确处理CSS多列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！