使用Chrome打印HTML页面时出现渲染异常问题

使用的HTML代码： #

<div class="p1">
    <h1>First Title</h1>
</div>
<div class="p2">
    <h1>Second Title</h1>
</div>

使用的CSS代码： #

.p1 {
    width: 100%;
    display: inline-block;
    border: 1px solid black;
    height: 860px;
}
.p2 {
    margin-top: 10px;
    border: 1px dashed black;
}

现象： #

• Chrome浏览器正常打开页面时，布局完全正常：上方是带黑色实线边框、高度860px的div，下方带黑色虚线边框的div与它保持10px间距，无重叠。
• 用Chrome打印功能保存为PDF时，两个div出现重叠，第二个div的部分内容会覆盖在第一个div区域上。

原因： #

1. 第一个div设置了display: inline-block，Chrome的打印渲染引擎对这类元素的分页处理存在逻辑偏差。当元素高度接近或超过单页打印可用高度时，inline-block元素的垂直布局计算出错，导致后续元素的margin-top失效，引发重叠。
2. 固定高度的inline-block元素在打印分页时，浏览器无法准确识别其边界，会错误地将后续元素放置到前一个元素的分页区域内，造成视觉重叠。

解决方法： #

方法一：修改元素display属性

把第一个div的display: inline-block替换为display: block。块级元素的布局逻辑在打印引擎中更稳定，能正确识别元素边界和垂直间距，彻底解决重叠问题。修改后的CSS如下：

.p1 {
    width: 100%;
    display: block;
    border: 1px solid black;
    height: 860px;
}
.p2 {
    margin-top: 10px;
    border: 1px dashed black;
}

方法二：添加打印专用媒体查询规则

用@media print为打印场景单独设置样式，强制元素布局并添加分页控制，确保两个div分开展示：

@media print {
    .p1 {
        display: block;
        page-break-after: always; /* 强制在该元素后插入分页符 */
    }
}

这条规则会在打印时自动生效，既修正了inline-block的布局问题，又确保第二个div出现在新页面，完全避免重叠。

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