Firefox中break-after: avoid优先级失效，打印分页异常求助

需求说明 #

要实现打印时的分页规则：

• 每个内容块内部不允许被分页拆分
• 第二个div（标题块）和第三个div（内容块）必须处于同一页，不能被分页隔开

现有代码的问题 #

原代码通过给第二个div设置break-after: avoid、第三个div设置break-inside: avoid来实现需求，在Chrome中表现正常：第一个div单独在第1页，第二个和第三个div从第2页开始，第三个div因过长自动拆分到第3页。但在Firefox中出现异常：第一个和第二个div挤在第1页，第三个div跨第2、3页显示，Firefox会忽略第二个div的break-after: avoid规则，导致标题块和内容块被拆分。

无需嵌套的解决方案 #

不用嵌套div，通过调整分页属性的组合就能解决Firefox的兼容性问题：

1. 给第一个div设置break-after: always，强制它之后必须分页，确保第二个和第三个div从新页面开始
2. 给第二个和第三个div同时添加break-inside: avoid和page-break-inside: avoid（后者是Firefox的兼容属性），保证块内不会被分页拆分

修改后的代码如下：

CSS

.first {
    height: 20cm;
    border: solid red 5pt;
    break-after: always; /* 强制第一个div后分页 */
}
.second {
    height: 2cm;
    border: solid blue 5pt;
    break-inside: avoid;
    page-break-inside: avoid; /* 兼容Firefox */
}
.third {
    height: 30cm;
    border: solid green 5pt;
    break-inside: avoid;
    page-break-inside: avoid; /* 兼容Firefox */
}

HTML

<body>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</body>

原理说明 #

Firefox对break-after: avoid的解析逻辑和Chrome不一致，改用强制第一个div后分页的方式，直接确保第二个和第三个div在同一页起始位置，再配合块内禁分页的属性，就能在两个浏览器中都实现预期的分页效果，同时避免了额外的嵌套结构。

内容的提问来源于stack exchange，提问作者Archibald Perez