Chrome打印视图CR-80卡内容分页且页面半空白问题求助

问题根源 #

你的代码存在两个核心问题：

• HTML结构错误：把内容<div>直接嵌套在了<style>标签内部，导致浏览器无法正确解析内容，同时破坏CSS规则的有效性。
• 内容总高度超出卡片尺寸：顶部边距+所有内容的padding和高度总和超过了CR-80卡的54mm高度，触发了分页。

修正后的代码 #

<div id="printablediv" class="hidden" style="font-family: Poppins; font-size: 34px; width: 86mm; height: 54mm; overflow: hidden; page-break-inside: avoid;">
  <div style="color: #18349b; padding-top: 10px; font-weight: bold; margin-left: 24px;">RASHIDI ALLY SIMBA</div>
  <div style="color: #18349b; padding-top: 8px; font-weight: bold; margin-left: 24px;">RASHIDI ALLY SIMBA</div>
  <div style="color: #18349b; padding-top: 8px; font-weight: bold; margin-left: 24px;">RASHIDI ALLY SIMBA</div>
  <div style="color: #18349b; padding-top: 8px; font-weight: bold; margin-left: 24px;">RASHIDI ALLY SIMBA</div>
  <div style="color: #18349b; padding-top: 8px; font-weight: bold; margin-left: 24px;">RASHIDI ALLY SIMBA</div>
  <div style="color: #18349b; padding-top: 12px; font-weight: bold; margin-left: 24px;">0  1203  2940  5008  4992</div>
</div>

<style type="text/css" media="print">
  @page {
    size: 86mm 54mm;
    margin: 0; /* 先重置边距，再通过容器内边距控制对齐 */
  }
  body {
    margin: 0;
    padding: 0;
  }
  #printablediv {
    display: block !important;
    z-index: auto;
  }
  .hidden {
    display: none;
  }
</style>

关键优化点 #

1. 修复结构错误：将内容元素从<style>中移出，确保CSS和HTML分离。
2. 精确控制尺寸：给打印容器设置固定宽高（与CR-80卡一致），避免内容溢出。
3. 禁用分页：添加page-break-inside: avoid;强制内容在单页内显示。
4. 调整间距：减少多余的padding-top值，确保所有内容总高度不超过54mm。
5. 统一边距策略：先重置@page的margin为0，再通过容器内边距/元素间距实现对齐，避免浏览器默认边距干扰。

额外调试建议 #

• 在Chrome打印预览中，开启"更多设置"里的"背景图形"，确保颜色和样式正确显示。
• 如果仍有对齐问题，建议将单位统一为mm（比如把24px换成6mm），避免不同浏览器的px/mm转换差异。

内容的提问来源于stack exchange，提问作者shujaat ali