Internet Explorer (IE11) 忽略 CSS 内部闯入：避免

Question

在两栏框 (column-count: 2) 中，CSS 设置 break-inside: avoid 应避免某些内容从一栏进入另一栏。这在 Firefox 和 Chrome（使用适当的 -webkit... 名称）中工作正常，但在 Internet Explorer 中却不行。

举个例子： https://jsfiddle.net/6s7843ue/1/

只是为了确保它不是内容中的 flexbox： https://jsfiddle.net/6s7843ue/4/

我没有找到任何IE不支持break-inside的信息，恰恰相反：https://msdn.microsoft.com/de-de/library/hh772193%28v=vs.85%29.aspx

我做错了什么？谢谢！

示例代码

（另见上面的 jsFiddle）

HTML

<div class="outer" style="margin: 40px auto; width: 500px; border: 1px solid #0000FF">
    <div class="container">
      This is a rather long text to break into three separate lines, but sometimes won't stay in one column
    </div>    
    <div class="container">
      Should be in next column
    </div>
</div>

CSS

.outer {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.6em;
    -moz-column-gap: 1.6em;
    column-gap: 1.6em;
}
.container {
  border: 1px solid #AAAAAA;
  margin: 0.2em 0;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  align-items: center;
}

Answer 1

更改容器显示：flex 到 display:inline-flex 并在 ie:

中工作

.container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Answer 2

According to caniuse.com, IE11:

Supports the page-break-* alias from the CSS 2.1 specification, but not the break-* properties from the latest spec.

和

Does not support avoid for page-break-before & page-break-after (only page-break-inside).

Answer 3

使用 display: inline 或 display: inline-flex?（Javier Gonzalez 的建议）可以解决问题。但它可能需要一些额外的 CSS，因为内联元素的工作方式自然不同于块元素。

在的旁注中，我最近找到了另一个解决方案：overflow: hidden。这可能与块格式化上下文有关......它也解决了这个问题，而不改变容器的流行为。

.container {
  overflow: hidden;
}

如果有人对 IE 有时对 break-inside: avoid 和 column-count 的奇怪理解有一个合理的解释，我仍然很感兴趣。

Internet Explorer (IE11) 忽略 CSS 内部闯入：避免

Internet Explorer (IE11) ignores CSS break-inside: avoid

html

css

internet-explorer

internet-explorer-11

示例代码