html – Internet Explorer(IE11)忽略CSS break-inside：避免

概述在一个双列框(列数：2)中,CSS设置为break-inside：避免应避免某些内容从一列中断到另一列.这适用于Firefox和Chrome(使用适当的-webkit …名称),但不适用于Internet Explorer. 这是一个例子： https://jsfiddle.net/6s7843ue/1/ 只是为了确保它不是内容中的flexbox： https://jsfiddle.net/6s7 在一个双列框(列数：2)中,CSS设置为break-insIDe：避免应避免某些内容从一列中断到另一列.这适用于firefox和Chrome(使用适当的-webkit …名称),但不适用于Internet Explorer.

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

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

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

我究竟做错了什么？谢谢！

示例代码

(另见上面的Jsfiddle)

HTML

<div  >    <div >      This is a rather long text to break into three separate lines,but sometimes won't stay in one column    </div>        <div >      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;}

解决方法 更改容器显示：flex to display：inline-flex,它适用于：

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

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

总结

以上是内存溢出为你收集整理的html – Internet Explorer(IE11)忽略CSS break-inside：避免全部内容，希望文章能够帮你解决html – Internet Explorer(IE11)忽略CSS break-inside：避免所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。