本文详解如何通过 CSS @page、媒体查询与可见性控制，精准限定仅一个 <div> 区域输出至窄幅热敏标签打印机，避免多页截断，并修正 jQuery Mobile 环境下因元素渲染导致的意外分页问题。
本文详解如何通过 css @page、媒体查询与可见性控制，精准限定仅一个 `
` 区域输出至窄幅热敏标签打印机，避免多页截断，并修正 jquery mobile 环境下因元素渲染导致的意外分页问题。
在使用 Brother 等小型标签打印机（如 62mm × 52mm 尺寸）进行网页直打时，常见痛点是：本意只打印一个精简的 5 行文本区块，结果却输出 2–3 页空白或重复内容。根本原因往往并非 CSS 尺寸设置错误，而是浏览器打印引擎对 visibility: hidden 的处理存在兼容性缺陷——尤其在 jQuery Mobile 等框架下，被隐藏的父级元素（如 .no-print 容器）仍可能触发布局占位或分页计算，导致 .page 区域被强制拆分到多个物理页面。
✅ 正确做法：叠加 opacity + visibility + display 三重保险
仅靠 display: none 或 visibility: hidden 均不足以彻底“消除”元素在打印流中的影响。推荐采用组合式隐藏策略，确保所有非目标元素在打印上下文中完全脱离文档流且不参与盒模型计算：
@media print {
/* 彻底移除非打印元素及其子树 */
.no-print, .no-print * {
display: none !important;
visibility: hidden !important;
opacity: 0 !important; /* 关键补丁：阻止 Safari/Chrome 打印引擎误判占位 */
position: absolute !important;
left: -9999px !important;
}
/* 全局重置：隐藏 body 内一切内容 */
body * {
visibility: hidden;
}
/* 仅显式恢复目标区域 */
.page, .page * {
visibility: visible;
}
/* 精确适配标签尺寸 + 横向旋转（适用于竖排标签） */
@page {
size: 62mm 52mm;
margin: 0;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 52mm; /* 注意：旋转后宽高互换 */
height: 62mm;
padding: 0;
margin: 0;
transform: rotate(270deg);
transform-origin: top left;
box-sizing: border-box;
}
/* 强制单页，禁用分页符干扰 */
.page::before,
.page::after {
content: "";
display: block;
page-break-before: avoid;
page-break-after: avoid;
}
}? HTML 结构建议（关键细节）
务必确保 .page 是独立、无嵌套 .no-print 父容器的顶层块级元素，且避免 jQuery Mobile 自动注入的 wrapper（如 ui-page, ui-content）干扰：
<!-- ✅ 推荐：.page 直接挂载在 body 下，避开 jQuery Mobile 包装 -->
<body>
<!-- 其他 UI 内容（加 no-print） -->
<div class="no-print">
<header>...</header>
<nav>...</nav>
</div>
<!-- ✅ 唯一打印区域：独立、纯净、无额外包裹 -->
<div class="page" style="font-family: 'Courier New', monospace; font-size: 10px;">
<p style="margin: 2px 0; text-align: center;"><?php echo htmlspecialchars($_SESSION['prod_name']); ?></p>
<p style="margin: 2px 0; text-align: center;">#<?php echo htmlspecialchars($_SESSION['prod_no']); ?></p>
<p style="margin: 2px 0; text-align: center;"><?php echo date('d/m/y', strtotime($_SESSION['date'])); ?></p>
<p style="margin: 2px 0; text-align: center;"><?php echo htmlspecialchars($_SESSION['result1']); ?></p>
<p style="margin: 2px 0; text-align: center;"><?php echo htmlspecialchars($_SESSION['result2']); ?></p>
</div>
</body>⚠️ 注意事项与调试技巧
- 禁止使用 align="center" 属性：已废弃，改用 text-align: center + margin: 0 防止默认段落间距引发额外高度；
- 务必转义 PHP 输出：使用 htmlspecialchars() 防止 XSS 及特殊字符破坏布局；
- 字体选择优先等宽字体：如 Courier New，确保字符宽度一致，避免换行错位；
- 测试前清空打印预览缓存：Chrome 中按 Ctrl+P 后点击右上角「更多设置」→「清除缓存」；
- 验证实际物理尺寸：在打印预览中启用「显示边框」（部分浏览器需勾选「背景图形」），确认内容严格限制在 52×62mm 区域内；
- jQuery Mobile 特别提示：若 .page 被自动包裹进 .ui-content，请在 pagebeforeshow 事件中动态将 .page 移出并追加至 body 末尾，彻底脱离框架布局流。
通过上述方案，可稳定实现「所见即所打」——无论浏览器环境如何，.page 区域始终以单页、精确尺寸、无干扰内容输出至微型标签打印机，彻底解决多页空白与定位偏移问题。
