本文详解如何通过 css @page、媒体查询与可见性控制，精准限定网页中仅一个 div 区域参与打印，并解决因 jquery mobile 或隐式布局导致的多页溢出问题，特别适配 brother 等热敏标签打印机。
本文详解如何通过 css @page、媒体查询与可见性控制，精准限定网页中仅一个 div 区域参与打印，并解决因 jquery mobile 或隐式布局导致的多页溢出问题，特别适配 brother 等热敏标签打印机。
在为小型标签打印机（如 62mm × 52mm Brother 标签机）开发网页打印功能时，常见痛点是：本意只打印一个紧凑的 5 行文本区块，却意外输出 2–3 页空白或重复内容。根本原因往往并非 jQuery Mobile 的“bug”，而是 CSS 打印样式中 visibility: hidden 的局限性——它仅隐藏元素视觉呈现，但不释放文档流空间，导致父容器（如 body）仍按原始高度计算分页，触发多余分页。
✅ 正确做法：组合使用 display: none + visibility: hidden + opacity: 0
仅靠 display: none 或 visibility: hidden 均存在缺陷：
- display: none 可彻底移除元素，但某些框架（如 jQuery Mobile）可能动态重绘或插入占位节点；
- visibility: hidden 保留盒模型尺寸，易引发分页器误判页面高度；
- opacity: 0 单独使用仍占据空间，且无法阻止打印（多数浏览器会打印透明元素）。
推荐方案是三者协同，确保“彻底不可见、不占空间、不参与分页”：
@media print {
/* 彻底屏蔽所有非目标元素 */
.no-print, .no-print * {
display: none !important; /* 移出文档流 */
visibility: hidden !important; /* 防止框架残留渲染 */
opacity: 0 !important; /* 兜底：确保零透明度（部分旧版浏览器需此） */
pointer-events: none !important; /* 可选：禁用交互干扰 */
}
/* 重置 body 和根元素，避免全局 margin/padding 干扰 */
body, html {
margin: 0 !important;
padding: 0 !important;
height: auto !important;
overflow: visible !important;
}
/* 目标打印区域：绝对定位 + 精确尺寸 + 旋转适配 */
.page {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 52mm !important; /* 注意：旋转后宽高互换 */
height: 62mm !important;
margin: 0 !important;
padding: 4mm !important; /* 内边距预留可读空间，避免裁切 */
box-sizing: border-box !important;
transform: rotate(270deg) !important;
transform-origin: top left !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 强制单页，禁用分页符 */
.page::before,
.page::after {
content: "" !important;
display: none !important;
}
.page {
page-break-before: avoid !important;
page-break-after: avoid !important;
page-break-inside: avoid !important;
}
}? HTML 结构优化建议
将 .page 类直接应用于 <div> 是合理做法，但需确保其无继承的外边距、内边距或最小高度约束。jQuery Mobile 中 data-role="content" 可能注入默认样式，建议显式重置：
<!-- 推荐：剥离框架干扰，精简结构 -->
<div class="page" style="margin:0;padding:0;min-height:0;">
<p style="margin:2px 0;font-size:10px;text-align:center;"><?php echo htmlspecialchars($_SESSION['prod_name']); ?></p>
<p style="margin:2px 0;font-size:10px;text-align:center;">#<?php echo htmlspecialchars($_SESSION['prod_no']); ?></p>
<p style="margin:2px 0;font-size:10px;text-align:center;"><?php echo date("d/m/y", strtotime($_SESSION['date'])); ?></p>
<p style="margin:2px 0;font-size:10px;text-align:center;"><?php echo htmlspecialchars($_SESSION['result1']); ?></p>
<p style="margin:2px 0;font-size:10px;text-align:center;"><?php echo htmlspecialchars($_SESSION['result2']); ?></p>
</div>⚠️ 关键注意事项：
- 始终对用户输入做 htmlspecialchars() 转义，防止 XSS 及 HTML 标签破坏布局；
- 使用 font-size: 10px 及紧凑 margin（如 2px），确保 5 行文本在 62mm 高度内完整显示；
- @page { size: 62mm 52mm; } 必须与 .page 的 transform: rotate(270deg) 配合：物理纸张是 62mm（高）× 52mm（宽），而旋转后内容逻辑宽高互换，故 .page 设为 width: 52mm; height: 62mm；
- 测试前清空浏览器打印预览缓存，Chrome 中可按 Ctrl+Shift+P → 输入 “Rendering” → 勾选 Emulate CSS media type: print 实时调试。
✅ 验证与调试技巧
- 在 DevTools 中切换至 Rendering → Emulate CSS media: print，观察 DOM 是否仅剩 .page 节点；
- 检查 .page 计算后的 offsetHeight 是否 ≤ 62mm（约 235px @ 96dpi）；
- 若仍分页，临时添加 body { height: 62mm !important; } 强制截断，确认是否为父容器高度泄露所致。
通过以上结构化控制，即可稳定实现「单页、单区域、精准尺寸」的标签打印输出，无需依赖 JavaScript 干预，兼容主流浏览器及 jQuery Mobile 环境。
