“缩小以适应”未适配A4页面的IE/FF打印问题解决方案咨询

嘿，针对你在IE和Firefox里遇到的打印适配问题，我刚好有几个实战过的解决方案——毕竟这俩老伙计的打印渲染逻辑跟Chrome确实不太一样，得针对性调整：

先分析现有代码的核心问题 #

你当前的代码存在几个关键问题：

• @page的边距设置失衡（margin: 2% 0% 0% 2%），导致右侧和底部留白过多
• 页面容器用了固定像素尺寸（比如page1的width:675px），没有适配A4纸张的实际打印区域，开启“Shrink to Fit”时浏览器无法正确计算缩放比例
• 内部容器的尺寸（比如div的width:730px）超出了打印区域可用宽度，进一步加剧留白问题

针对性修改方案 #

1. 修正@page规则，用物理单位锁定边距和纸张尺寸 #

打印场景下，物理单位（mm）比像素更可靠，能避免不同DPI打印机的渲染差异。我们直接指定A4尺寸，并设置刚好让内容占90%的边距：

@page {
  size: A4; /* 明确指定目标纸张，IE和Firefox均支持 */
  margin: 5%; /* 四边各留5%边距，合计10%，内容自动占90%区域 */
  /* 如需更精确的物理边距，也可以用：margin: 14.85mm 10.5mm; 对应A4上下各14.85mm、左右各10.5mm的边距 */
}

2. 重置页面容器尺寸，适配打印区域 #

把固定像素的容器尺寸改成100%，配合box-sizing确保边框不会超出区域：

/* 重置html/body默认样式，避免浏览器自带边距干扰 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.page1, .page {
  width: 100%; /* 占满打印区域的可用宽度 */
  height: 100%; /* 占满打印区域的可用高度 */
  border: 0; /* 去掉不必要的边框，如需保留则加box-sizing: border-box */
}

/* 调整内部容器的定位和尺寸 */
.page1 > tr > td > div, .page > tr > td > div {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 1px solid #000;
  box-sizing: border-box; /* 让边框包含在宽高内，避免超出 */
  position: relative;
}

/* 内部表格自适应容器 */
.page1 > tr > td > div > table, .page > tr > td > div > table {
  width: 100%;
  height: 100%;
  border-collapse: collapse; /* 消除表格间隙 */
}

3. 修复分页样式（针对Firefox/IE的分页兼容性） #

现有.pageBreak的width:0px可能导致布局异常，调整为：

.pageBreak {
  page-break-before: always;
  width: 100%;
  height: 0;
  visibility: hidden; /* 确保不占空间但正常触发分页 */
}

测试验证 #

修改完成后，在IE和Firefox中打开打印预览，选择“Shrink to Fit”选项：

• 内容应该刚好填充A4纸张的90%区域，四边均匀留有10%的边距
• 右侧和底部的大量空白会消失，布局与预览一致

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