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

Posted 2023-03-06

【中文标题】Internet Explorer (IE11) 忽略 CSS break-inside：避免

【英文标题】：Internet Explorer (IE11) ignores CSS break-inside: avoid

【发布时间】：2016-08-21 17:44:30

【问题描述】：

在两列框 (column-count: 2) 中，CSS 设置 break-inside: avoid 应避免某些内容从一列中断到另一列。这在 Firefox 和 Chrome 中运行良好（使用适当的 -webkit... 名称），但在 Internet Explorer 中则不行。

这是一个例子： 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;

【参考方案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

【讨论】：

好主意，原则上，但我需要容器为display: flex（抱歉，这仅在第一个 jsFiddle 中可见，此处发布的时间有点长）。我没有在您参考的页面上找到有关此问题的更多有用信息？！

谢谢。我实际上并不知道有一个display: inline-flex 对应于display: inline。此外，我必须添加width: 100% 才能看到一个在另一个下方的容器（因为我可以有多个容器或只有一个......取决于）。现在可以了 - 很酷。为什么 Internet Explorer 需要一个内联元素才能让 break-inside: avoid 正常工作？

哦......只是对 IE 条件内容的交叉引用 - 我们为什么要用这种 IE hack 来打扰 Firefox 和所有其他人：***.com/a/11173118/336311

【参考方案2】：

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

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

.container 
  overflow: hidden;

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

【参考方案3】：

According to caniuse.com，IE11：

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

和

不支持 page-break-before 和 page-break-after 的避免（仅 page-break-inside)。

【讨论】：

如您所见，page-break-inside 属性（其中 IE11 应支持avoid，根据 caniuse.com）已设置。在开发者工具中，IE11 告诉使用break-inside 属性——但这两个属性似乎都没有达到预期的效果:(

@BurninLeo 我无法检查，但是否有可能，即使它允许在开发工具中进行设置，它也不起作用？

好吧，显然它没有 ;) 我想说的是：开发人员工具通常会显示哪些属性被使用，哪些没有 - 这对于所有 -ms- 和 - 都非常有用以 webkit 为前缀的属性，让生活变得更加艰难。就我而言，IE 告诉我使用了break-inside。我只是不明白为什么它没有效果......它应该。