css - 打印 CSS - Chrome 中的分页符

Question

我最近陷入了这个问题，其中 chrome 行为怪异且不遵守任何 CSS 规则。

在我的页面中，我有一些我不想在打印时中断的部分。下面是代码

body.index .section{
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid;
}

它适用于除 CHROME 之外的所有其他浏览器。在 chrome 中，它看起来像

红色部分显示 div 中断。

PS：我模糊了页面只是为了避免任何问题。

Answer 1

尝试添加position: relative到该部分。

body.index .section{
    position:relative;
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid;
}