break-inside：避免不使用边缘填充

Question

我在使列布局与包含填充的块元素一起正常工作时遇到问题。我面临的问题是，第一列的白色背景细线中断到第二列的开头。它出现在 IE11 和 MS-Edge 中。 Chrome 和 Firefox 按预期显示列。

.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;
    background-color: grey;
}
.container {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 0.75em;
  background-color: white;
}

.container + .container {
  
  margin-top: 0.5em;
}

<div class="outer" style="margin: 40px auto; width: 500px; border: 1px solid red">
    <div class="container">
      This is a rather long text to break into separate lines but - sometimes - not to stay in one. With some additional text for a longer column
    </div>    
    <div class="container">
      Next column
    </div>
    <div class="container">
      Another column
    </div>
</div>

如何让 break-inside: avoid 与 IE11 和 MS-Edge 一起工作？我还尝试将文本包装到带有边距的额外 DIV 中并删除填充，但这会破坏第一列本身的文本。

有人有提示吗？提前致谢！

更新

看来问题比描述的还要严重。 break-inside: avoid根本无法在边缘工作。这里我把块元素放到列中的元素中（也用里面的表打断）：

.column {
  column-count: 2;
  column-gap: 1em;
}

.elem {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.elem + .elem {
  margin-top: 0.5em;
}

.elem {
  background-color: orange;
}

.elem + .elem {
  background-color: lightblue;
}

.elem + .elem + .elem {
  background-color: lightgreen;
}

<div class="column">
  <div class="elem">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
  </div>
  <div class="elem">
    <div>one</div>
  </div>
  <div class="elem">
    <div>one</div>
  </div>
</div>

MS documentation for Edge states it is supported, yet it isn't working. Even Can I use 声明它受支持并且没有列出已知问题。

必须有一些解决方案...

Answer 1

好的，我终于找到了解决方案：我在 CSS 中构建了一个开关，它只对 IE10、IE11 和 MS Edge 执行（在此处找到：Browser Strangeness）。

在该开关中，我将元素设置为 display: inline-block 和 width: 100%。这样它可以在 Chrome、Firefox 和现在的 Edge 中使用。

.column {
  column-count: 2;
  column-gap: 1em;
}

.elem {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.elem + .elem {
  margin-top: 0.5em;
}

.elem {
  background-color: orange;
}

.elem + .elem {
  background-color: lightblue;
}

.elem + .elem + .elem {
  background-color: lightgreen;
}

/* columns fix for IE10, IE11 and MS Edge*/
_:-ms-lang(x), .column {

 margin-top: -0.5em;
}
_:-ms-lang(x), .elem {

 display: inline-block;
 width: 100%;
 margin-top: 0.5em;
}

<div class="column">
  <div class="elem">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
  </div>
  <div class="elem">
    <div>one</div>
  </div>
  <div class="elem">
    <div>one</div>
  </div>
</div>

break-inside：避免不使用边缘填充

break-inside: avoid not working with padding in edge

css

internet-explorer-11

microsoft-edge

css-multicolumn-layout