本文详解如何通过 css @media print 精确限定打印内容范围，解决因 dom 结构、可见性继承和 jquery mobile 渲染导致的多页输出问题，并提供针对 62mm×52mm 标签打印机的实战优化方案。
本文详解如何通过 css @media print 精确限定打印内容范围，解决因 dom 结构、可见性继承和 jquery mobile 渲染导致的多页输出问题，并提供针对 62mm×52mm 标签打印机的实战优化方案。
在使用小型热敏标签打印机（如 Brother 62mm × 52mm）进行网页直打时，一个常见却棘手的问题是：明明只标记了一个 <div class="page"> 为可打印区域，实际打印却生成 2–3 页空白或重复内容。这并非浏览器 Bug，而是由 CSS 可见性机制、jQuery Mobile 的动态 DOM 注入以及 @page 尺寸与元素渲染逻辑不匹配共同导致的。
核心问题在于你当前的打印样式中：
body * {
visibility: hidden;
}
.page, .page * {
visibility: visible;
}该写法存在两个关键缺陷：
- visibility: visible 不会重置 display: none 的级联效果 —— 即使子元素设为 visible，若其父级（如 .no-print 容器）被设为 display: none，子元素仍不可渲染；
- jQuery Mobile 会在 DOM 中自动插入大量辅助结构（如 .ui-page, .ui-content 等），这些元素虽未显式添加 .no-print，但因 body * { visibility: hidden } 被隐藏后，.page 内部元素的 visibility: visible 无法穿透其祖先的 display: none 状态，造成布局错乱与意外分页。
✅ 正确解法不是叠加 opacity: 0（答案中建议的 opacity: 0 !important 实际无效且冗余），而是彻底移除干扰元素的渲染流，并确保打印容器具备确定尺寸与独立布局上下文。
推荐印刷级打印样式（已验证兼容 Chrome/Firefox/Edge）
@page {
size: 62mm 52mm;
margin: 0;
}
@media print {
/* 1. 重置全局，仅保留 body 基础框 */
* {
visibility: hidden;
}
body {
visibility: visible;
padding: 0;
margin: 0;
}
/* 2. 移除所有非目标元素（比 display:none 更可靠）*/
.no-print,
.ui-page,
.ui-content,
header, footer, nav, aside {
display: none !important;
}
/* 3. 精确激活打印容器 */
.page {
visibility: visible !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 52mm !important; /* 注意：旋转后宽高互换 */
height: 62mm !important;
margin: 0 !important;
padding: 0 !important;
transform: rotate(270deg) !important;
transform-origin: top left !important;
overflow: hidden !important;
}
/* 4. 强制内部文本居中且无额外行距 */
.page p {
margin: 0 !important;
line-height: 1.2 !important;
font-size: 9px !important;
}
}HTML 结构优化建议（关键！）
避免将 .page 应用于外层 div（尤其在 jQuery Mobile 环境中），因其可能被框架包裹多层容器。推荐直接作用于语义化内联容器（如 <section>）或最小化包裹块，并禁用 jQuery Mobile 自动增强：
<!-- 添加 data-enhance="false" 防止 jQuery Mobile 重写结构 -->
<section class="page" data-enhance="false">
<p style="text-align:center; margin:2px 0;"><?php echo htmlspecialchars($_SESSION['prod_name']); ?></p>
<p style="text-align:center; margin:2px 0;">#<?php echo htmlspecialchars($_SESSION['prod_no']); ?></p>
<p style="text-align:center; margin:2px 0;"><?php echo date('d/m/y', strtotime($_SESSION['date'])); ?></p>
<p style="text-align:center; margin:2px 0;"><?php echo htmlspecialchars($_SESSION['result1']); ?></p>
<p style="text-align:center; margin:2px 0;"><?php echo htmlspecialchars($_SESSION['result2']); ?></p>
</section>⚠️ 重要注意事项
- 务必对 PHP 输出内容执行 htmlspecialchars()，防止 XSS 与 HTML 解析异常；
- transform: rotate(270deg) 后，原始 width/height 需按物理标签尺寸反向设置（即 52mm 宽 → 设为 width: 52mm）；
- 打印前在浏览器中使用 “打印预览” → “更多设置” → 关闭“页眉页脚”、“背景图形”，否则可能覆盖内容；
- 若仍出现分页，检查是否遗漏了 jQuery Mobile 生成的 .ui-loader 或 .ui-popup 等浮动元素，统一加入 .no-print 或 display: none。
通过以上结构化样式重写与 DOM 控制，可稳定实现单页精准输出，完美适配微型标签打印机的物理约束。
