Question

我有一个问题是让列布局与包含填充的块元素一起正常工作。我面临的问题是，第一列的白色背景细线突破到第二列的开头。它发生在IE11和MS-Edge中。 Chrome和Firefox会按预期显示列。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何让break-inside: avoid使用IE11和MS-Edge？我还尝试将文本包装到带有边距的其他DIV中并删除填充，但这会打破第一列本身的文本。

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

更新

似乎问题比描述的更糟糕。 break-inside: avoid根本不在边缘工作。在这里，我将块元素放入列中的元素中（也打破了里面的表）：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

MS documentation for Edge表示支持它，但它不起作用。即使是Can I use个州，它也受到支持且没有列出已知问题。

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

Answer 1

好的，我终于找到了一个解决方案：我已经构建了一个CSS切换，只能为IE10，IE11和MS Edge执行（在这里找到：Browser Strangeness）。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

break-inside：避免在边缘

1 个答案: