Html 从Chrome打印时出现无法解释的空白

Chrome（和其他WebKit渲染引擎）在打印时会生成看似无法解释的空白。代码位于代码笔链接中，但更易于用图片解释：

---

从chrome打印的实际结果（打印视图的屏幕截图）：

另外，设置了“默认”边距后，看起来确实是OL，但我不理解没有“默认”边距时的行为：

---

另一个随机空白的例子（完整的html，可以直接复制到记事本或任何东西）：

如果这个问题看起来很模糊，那就是：“为什么在试图打印没有页边空白的图片时，图片的右下方会出现空白？”

编辑：所以，我进行了一些测试，元素似乎没有完全覆盖主体，边框的行为与盒子模型的预期不符：

这几乎解决了我的问题，但我以前见过边界崩溃的问题——我不知道它在这里做什么，我很想知道

---

编辑：重新启动我的电脑，现在最后一张图片中多余的身体空间在右边而不是底部。这太傻了

对出现的边界的解释：

• 您的

  div

  尺寸为280mm x 80mm。比例（280/80）为3.5
• 您的

  页面大小为320mm x 120mm。比例（320/120）为2.67

当你要求Chrome删除页面的边距时，你会得到一个大小和比例相同的

div

（3.5）和一个缩小的

page

，试图将

div

放入，但页面大小仍然是2.67的比例。这就解释了神奇出现的边距

我现在正在想办法解决这个问题，但这会让你走上正轨。祝你好运

更新 而是阅读更新2

创建了一个粘贴箱，应用我在上面解释的内容： 我将您的页面大小增加了1毫米（现在是102毫米），因为： 车身尺寸：99/74=133784 但页面大小：101/76=/=133784 将此1mm添加到页面宽度可修复边框

更新#2 第二个模型的最终粘贴箱。我使用了以下修复程序：

@page {
   size: 101.6mm 76mm;
   padding: 0;
   margin:1mm;
   border: none;
   border-collapse: collapse;
}

---

并增加了

最大高度：100%至
.reportBody
。令人惊讶的是，你居然可以在毫微米上添加更多的数字。101.6mm使其完全符合您想要的比例，
max height:100%
阻止Chrome生成另一页。
我将
.reportTable
的大小调整了两个
mm
，Chrome的打印预览中消除了多余的空白

之前：

之后：

看起来
表格
没有占据
主体
设置的整个区域，浏览器可以看到额外的空间。也许是Chrome的功能？
@Wouter:谢谢您的编辑-有趣的是，在Chrome中，它位于右侧，但如果我通过WebKit html-->Pdf生成器运行它，它位于左侧（WkHtmlToPdf）。实际上，我只是在寻找一个在Chrome上有效的答案。修复了屏幕截图上箭头的方向。你完全正确。这可能不值得作为完整答案发布，但FWIW我在OSX上的测试显示Chrome支持
@page{size:scape}
，但不支持特定的页面大小；Safari和Firefox似乎完全忽略了大小规则。根据其他答案，windows中的情况似乎不那么可怕，但如果跨平台与您相关，那么，就是这样了。@DanielBeck谢谢，我实际上是将此html放入.NET中的WkHtmlToPdf中，并在浏览器中显示输出PDF文件（或提供fl dl），从而解决了兼容性问题。Chrome print的呈现方式似乎与WkHtml完全相同，这就是我将其作为示例的原因。我不确定你是否想要那么多细节，但因为你花了时间，所以想回复。谢谢你的回复，我现在正在考虑。编辑：不确定是否看到上一次编辑，如果看到，请忽略它。我主要对这里的整体逻辑感兴趣，您正在帮助我。添加了一个解决方案，我认为这几乎是最终的解决方案！谢谢你看。看来这是一个我们将要解决的问题。我一直在搞砸它，但即使正确设置比率似乎也不起作用。我发现，如果我将body和child div或table设置为完全相同的大小，它们的像素大小就不会相同，即使调试器中的“Computed”值显示它们都是从100mm开始计算的。很奇怪，是的，我也有同样的经历。这就是为什么我必须一步一步地测试并添加.1mm，以最终找到有效的东西。我怀疑这可能是Chrome以不同的方式将
mm
从CSS转换为“现实生活”
mm
，用于每个标记（
body
，和
divs
）。对不起，我不能再多看一点。一切都很好——我真的很感激。我努力解决了这个问题，我认为不值得花更多的时间在上面，最好能得到第二个意见。我很感激你的回答，我们得出了相同的结论，但对我来说似乎没有意义。我过去曾试图找出某些
html/css
怪癖背后的原因，但通常没有成功。在没有真正理解问题的情况下，仅仅找到一个解决方法就足够了。
html/css
世界充满了随每个版本而来又去的怪癖。答案可能隐藏在浏览器渲染引擎代码的深处。我知道这不是一个答案，但这里可能没有一个好的答案。
@page {
   size: 101.6mm 76mm;
   padding: 0;
   margin:1mm;
   border: none;
   border-collapse: collapse;
}

.reportTable {
    width: 99mm; /* was 97mm */
    height: 74mm; /* was 72mm */
    padding: 0;
    margin: 0;
    border: 1mm solid;
    border-collapse: collapse;
    background-color:red;
}