[英]Internet Explorer (IE11) ignores CSS break-inside: avoid
在两列框( 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 并且它在即:
.container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
使用display: inline
还是display: inline-flex?
(哈维尔冈萨雷斯建议)解决了这个问题。 但它可能需要一些额外的 CSS,因为内联元素的工作方式自然与块元素不同。
在https://stackoverflow.com/a/7785711/336311 的旁注中,我最近找到了另一个解决方案: overflow: hidden
。 这可能与块格式上下文有关......它也解决了这个问题,而不会改变容器的流行为。
.container {
overflow: hidden;
}
如果有人对 IE 有时对break-inside: avoid
的奇怪理解有合理的解释break-inside: avoid
与column-count
结合使用,我仍然很感兴趣。
根据 caniuse.com ,IE11:
支持 CSS 2.1 规范中的 page-break-* 别名,但不支持最新规范中的 break-* 属性。
并且
不支持避免 page-break-before 和 page-break-after(仅 page-break-inside)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.