Firefox中div无法跨Columns多列显示的原因及兼容解决方案

1. Firefox出现该行为的原因 #

该差异来自不同浏览器对多列布局中块级元素拆分规则的默认实现不同：
Firefox对普通块级元素默认启用了尽量避免内部拆分的逻辑，当多列容器第一列的剩余空间不足以放下最后一个完整的<div>元素时，会直接将整个<div>移动到第二列渲染；而Chromium内核浏览器默认允许普通块级元素在列之间拆分，因此会将该<div>的头部内容放在第一列，剩余内容自动排布到第二列。

2. 不修改DOM结构的兼容方案 #

只需要给最后一个包含正文的<div>添加break-inside: auto的CSS规则，强制允许该元素在列之间拆分即可，修改后的代码示例如下：

<main style="columns: 2;">
    <h1>Title goes here</h1>
    <div>Date, author, and other stuff.</div>
    <div style="break-inside: auto;">
        <p>...</p>
        <p>...</p>
        <p>...</p>
         ⋮
        <p>...</p>
    </div>
</main>

如果需要兼容更老版本的Firefox，可以额外添加前缀属性-moz-column-break-inside: auto。

效果参考 #

图1 Chromium中符合预期的多列布局效果

图2 Firefox中将全部正文移至第二列的异常效果 #

内容的提问来源于stack exchange，提问作者Arseni Mourzenko