(IE11)忽略CSS破解:避免

Question

在两列框(column-count: 2)中，CSS设置break-inside: avoid应避免某些内容从一列中断到另一列。这在火狐和Chrome中很好(使用适当的-webkit.)，但不在中。

下面是一个例子：https://jsfiddle.net/6s7843ue/1/

只是为了确保它不是内容中的柔性盒：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:内联-flex，它在ie中工作：

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

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

Answer 2

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

在https://stackoverflow.com/a/7785711/336311的附带说明中，我最近发现了另一个解决方案：overflow: hidden。这可能与块格式上下文有关..。它也解决了这个问题，而不改变容器的流行为。

.container {
  overflow: hidden;
}

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

Answer 3

根据caniuse.com，IE11：

支持CSS 2.1规范中的分页-*别名，但不支持最新规范中的换页-*属性。

和

不支持避免分页前和分页后(仅分页内).