你的问题其实很常见——不同浏览器/打印机的打印引擎对CSS的解析差异很大，尤其是默认边距、缩放逻辑这块，Firefox在打印样式的支持上确实做得不错，但其他浏览器比如Chrome、Safari经常会有偏差。结合你的需求，我给你一套跨浏览器兼容的方案，分纯CSS基础版和JS增强版，覆盖内容多少不同的场景：

一、先搞定打印样式的基础重置与页面控制 #

首先要把浏览器默认的打印边距和样式清零，用@page规则精确控制打印页面的尺寸和边距，这是关键的第一步：

/* 全局打印页面规则 */
@page {
  size: A4 portrait; /* 可替换成你需要的尺寸，比如letter、legal，portrait是纵向，landscape是横向 */
  margin: 0; /* 去掉浏览器默认的打印边距，让内容能完全利用页面空间 */
}

@media print {
  /* 重置body样式 */
  body {
    margin: 0;
    padding: 2cm; /* 这里模拟页面的实际边距，因为@page设了margin:0，内边距不会被打印引擎截断 */
    box-sizing: border-box;
    width: 21cm; /* 和@page的A4宽度对应 */
    height: 29.7cm; /* 和@page的A4高度对应 */
    overflow: hidden; /* 防止内容溢出页面 */
    background: white; /* 强制白色背景，避免某些浏览器不打印背景 */
  }

  /* 隐藏不需要打印的元素，比如导航、侧边栏 */
  .navbar, .sidebar, .footer {
    display: none !important;
  }

  /* 打印容器样式，把所有需要打印的内容放在这个容器里 */
  .print-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 可选：控制内容块之间的间距 */
  }
}

二、纯CSS适配内容较少的场景 #

如果你的页面内容本身不会超过一页，只是需要填满页面的空白，用flex布局的flex-grow属性就能让内容自动拉伸：

@media print {
  .print-container .content-block {
    flex-grow: 1; /* 让内容块自动填充剩余空间 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 可选：垂直居中内容，或者用start/end调整位置 */
  }

  /* 调整字体大小，确保内容填满 */
  .print-container h1 {
    font-size: 2rem;
  }
  .print-container p {
    font-size: 1rem;
  }
}

三、JS增强版：动态缩放适配任意长度内容 #

如果内容长度不确定（可能超过一页），纯CSS就搞不定了，因为CSS无法实时计算内容高度和打印页面高度的比例。这时候用JavaScript在打印前动态计算缩放比例，是最可靠的方案：

// 监听打印前事件
window.addEventListener('beforeprint', () => {
  const printContainer = document.querySelector('.print-container');
  // 把A4的高度从cm转换成px（默认DPI是96，1cm=96/2.54 px）
  const pageHeight = 29.7 * 96 / 2.54;
  // 获取内容的实际高度
  const contentHeight = printContainer.offsetHeight;
  
  // 计算缩放比例，确保内容刚好能放进一页
  const scale = pageHeight / contentHeight;
  // 应用缩放，原点设为左上角，避免偏移
  printContainer.style.transform = `scale(${scale})`;
  printContainer.style.transformOrigin = 'top left';
  // 调整容器宽度，避免缩放后横向溢出
  printContainer.style.width = `${100 / scale}%`;
});

// 打印后恢复样式，不影响正常浏览
window.addEventListener('afterprint', () => {
  const printContainer = document.querySelector('.print-container');
  printContainer.style.transform = '';
  printContainer.style.width = '';
});

四、跨浏览器兼容的注意事项 #

• 避免使用vw/vmin等视口单位：打印时的视口是浏览器窗口，不是打印页面，所以用cm、in、%这些和打印页面绑定的单位更可靠。
• 测试打印预览：不同浏览器的打印预览模拟差异很大，一定要在Chrome、Safari、Edge等主流浏览器里测试。
• 禁用分页：如果有内容被意外分页，给容器加上page-break-inside: avoid，但我们的缩放方案其实已经避免了分页。
• 强制打印背景：有些浏览器默认不打印背景，在@media print里加-webkit-print-color-adjust: exact; print-color-adjust: exact;可以强制打印背景色和图片。

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