DOMPDF 设置page-break-inside:avoid的div仍出现异常分页问题求助

该问题是DOMPDF的分页计算逻辑兼容性问题导致的：你设置的page-break-inside: avoid未生效，本质是DOMPDF判断当前页剩余空间是否足够容纳元素时，没有把容器的padding、border以及子元素的margin全部纳入高度计算范围，误以为空间足够就开始渲染，实际渲染到一半发现内容溢出，就出现了半截内容、空出半页的异常分页，和你猜测的padding设置影响高度计算的判断完全吻合。

以下是对应解决方案：

• 方案1（最常用，90%以上场景可解决）：在.info外层嵌套一个无任何边距样式的空白容器，把page-break-inside: avoid规则写在外层容器上，内层.info保留原有样式即可。
  代码修改示例：
  HTML部分：

  <div class="page-break-avoid">
    <div class="info">
      <h2 class="font--xxl margin--m">Creatable checkboxes tooltip</h2>
      <p class="font--m margin--m">Lorem creatable checkbox lorem</p>
    </div>
  </div>
  

  新增CSS规则：

  .page-break-avoid {
    page-break-inside: avoid;
    /* 禁止给该容器添加任何margin、padding、border样式 */
  }
  

  同时删掉原.info规则里的page-break-inside: avoid属性。
• 方案2：如果方案1无效，给.info加上box-sizing: border-box和overflow: hidden属性，强制容器的宽高计算包含padding、border，同时避免子元素margin溢出影响整体高度判断。
  修改后.info的CSS规则补充：

  .info {
    /* 原有其他属性保留 */
    box-sizing: border-box;
    overflow: hidden;
  }
  

• 方案3：如果使用的是较旧版本的DOMPDF，升级到最新稳定版即可，旧版本的分页逻辑存在大量边距计算相关的已知bug，新版本已修复大部分相关问题。

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