打印页面时导航和按钮全被印出来，打印样式该藏哪些

用户打印订单详情，页面上导航、悬浮按钮、广告全都印在纸上。第一次遇到会往复杂处想，其实漏掉的多是个小前提。

@media print {
  nav, .btn, .ads, footer { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .order { page-break-inside: avoid; }
}

打印时复用了屏幕样式，没有单独定义打印媒体规则。这一点先确认清楚，后面就不用反复试。

「打印样式」相关的日志我一般连着看前后五分钟，单看一条报错经常判断不出是哪一步失败。把复现步骤压到三条以内，交给同事也能跑出来，才算真的定位清楚。

改动写完就同步给同事，下一个人踩同一个坑，成本还是你的。验证用真实数据走一遍，测试数据太干净，边界情况根本碰不到。

能分两步做的操作就别合成一步，中间看一眼返回值，出问题好判断。报错里带路径的，先去看那个路径在不在、权限对不对。

同一份配置存在多处的，先确认改的是被加载的那一份。

具体做法是，单独写打印样式表；隐藏交互元素；调整字号与分页。

改完照着核一遍，打印结果只保留正文内容，分页合理。