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: avoidjust 根本不在边缘工作。在这里，我将块元素放入列中的元素中（也与里面的表格打断）：

.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 声明它受支持，但它不起作用。甚至 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>