page-break-inside：避免和块级元素在 Chrome 中创建空列

Question

在这个小提琴https://jsfiddle.net/rpep00dg/7/ 中，内容前面是Chrome 中的一个空列。如果您在 Firefox 或 Safari 中打开小提琴，则“标题”之前没有空列。如果第一个元素是任何块级元素，例如p 标签，情况似乎就是这种情况。

这是一个在任何地方都有记录的 Chrome 错误吗？还有什么变通办法让它像 Firefox 和 Safari 一样呈现？

section {
  page-break-inside: avoid;
  margin-bottom: 10px;
}

html {
  height: 100%;
}

body {
  column-count: 2;
  column-gap: 36px;
  width:100%;
  height: 100%;
  column-fill: auto;
}

<section>
<h1>Header</h1>
<section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section>
<section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section>
</section>

Answer 1

这里有几个问题：

您忘记在标题 h1 标记中关闭 section。关闭它，它会在 chrome 中正常工作。

第二：

针对特定浏览器考虑以下内容：

-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
 column-count: 2; /*Default

我测试了上面的代码，它按预期工作。

希望对你有帮助。