突破:避免不使用边缘填充物。

Question

要使列布局正确地处理包含填充的块元素，我有一个问题。我面临的问题是，从第一列到第二列的开头有一条细的白色背景。它发生在IE11和MS中.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协同工作？我还尝试将文本包装到附加的DIVs中，加上页边距并删除填充，但这会破坏第一列本身的文本。

有人有线索吗？提前感谢！

更新

问题似乎比描述的更糟。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文档声明它是受支持的，但是它不起作用。甚至我能用一下吗也指出，它是受支持的，并且没有列出已知的问题。

一定有办法解决这个..。

Answer 1

好的，我终于找到了一个解决方案:我已经将一个开关构建到CSS中，它只对IE10、IE11和MS执行(在这里找到：浏览器奇性)。

在这个开关中，我将元素设置为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>

​