在一个两列的框中(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;
}
最佳答案
将容器 display: 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
关于html - Internet Explorer (IE11) 忽略 CSS 内嵌 : avoid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36889620/