屏幕上右下角的咨询悬浮条,打印后在四页纸的同一位置各出现一次,压住正文最后两行。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,position: fixed 的元素在分页打印时会被复制到每一页,浏览器按页重复绘制。打印样式没有把它改成 static 或直接隐藏。
「fixed 打印重复」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。报错里带路径的,先去看那个路径在不在、权限对不对。
@media print {
.float-bar, .back-top { display: none !important; }
.sticky-side { position: static !important; }
}
同一份配置存在多处的,先确认改的是被加载的那一份。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
备份不是备了就行,恢复一次才算数,很多备份文件打开才发现是空的。
具体做法是,打印样式里把 fixed 元素改成 position: static 或 display: none;需要保留的内容移到文档流里的正常位置;打印预览逐页翻 确认没有元素重复出现。
最后用这个标准收尾,四页打印稿上悬浮条消失,不再压住正文。
