看起来你遇到的是打印分页时常见的元素渲染异常问题，结合你提供的代码，我整理了几个针对性的解决方案：

1. 防止产品项被跨页切割 #

分页时如果单个产品元素被拆分到两页，很容易导致样式错乱。给每个产品项添加page-break-inside: avoid属性，确保完整的产品块始终在同一页：

@media print {
  .product-item { /* 替换成你的产品项类名/选择器 */
    page-break-inside: avoid;
    break-inside: avoid; /* 兼容现代浏览器 */
  }
}

2. 调整分页断点的位置 #

你当前的分页代码page-break-after: always加在了第二页内容的开头，这可能导致第一页末尾和第二页开头的内容冲突。正确的做法是把分页断点放在第一页内容的末尾：

<!-- 第一页产品内容 -->
<div class="page-break"></div>
<!-- 第二页产品内容 -->
<section id="packingPrint" style="font-family:verdana,helvetica,...">

同时优化打印样式里的分页规则，避免多余的空白或重叠：

@media print {
  #packingPrint {
    page-break-before: auto;
    page-break-after: auto;
  }
  .page-break {
    page-break-after: always;
    break-after: page; /* 兼容标准 */
    visibility: hidden; /* 避免分页元素占用空间 */
    height: 0;
  }
}

3. 修复打印模糊问题 #

打印模糊通常和浏览器的打印渲染引擎、CSS属性有关，试试这些调整：

• 确保打印样式中没有使用transform、filter等可能导致模糊的属性；
• 添加强制颜色/样式渲染的属性，确保样式准确输出：

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #packingPrint {
    zoom: 1; /* 修复部分浏览器的缩放模糊 */
    transform: none;
  }
}

• 在打印设置中选择实际大小或100%缩放，避免浏览器自动缩放内容导致模糊。

4. 检查容器的margin/padding #

如果第二页顶部产品模糊或样式偏移，可能是容器的顶部margin/padding在打印时被忽略或异常计算。给打印样式中的#packingPrint添加明确的边距：

@media print {
  #packingPrint {
    margin-top: 1cm; /* 根据你的页面设置调整，确保和页眉不重叠 */
    padding-top: 0;
  }
}

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