标签机精准打印控制技巧

核心问题在于你当前的打印样式中：

body * {
  visibility: hidden;
}
.page, .page * {
  visibility: visible;
}

该写法存在两个关键缺陷：

1. visibility: visible 不会重置 display: none 的级联效果 —— 即使子元素设为 visible，若其父级（如 .no-print 容器）被设为 display: none，子元素仍不可渲染；
2. 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 环境中），因其可能被框架包裹多层容器。推荐直接作用于语义化内联容器（如

  

  
#