从Chrome

Question

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

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

此外，它似乎OL与＆＃34;默认＆＃34;保证金设定，但我不理解没有它们的行为，＆＃34;默认＆＃34;：

@page {
   size: 320mm 120mm;
   margin: 10mm;
   padding: 0;
   border: none;
   border-collapse: collapse; 
}

http://codepen.io/anon/pen/obqLyy

随机空格的另一个例子（完整的html，可以直接复制到记事本或其他任何内容）：http://pastebin.com/wUXsqWae

如果问题看起来模糊不清，那么：＆＃34;为什么在尝试无边距打印时图像的底部和右侧有空白？＆＃34;

编辑：所以，我测试了一下，似乎元素完全不覆盖身体，边框不符合盒子模型的预期：

这几乎解决了我的问题，但我之前已经看到了边界崩溃的问题 - 我不知道它在这里做了什么，并且很想知道。

编辑：重新启动我的电脑，现在最后一张图片中的额外机身空间位于右侧而不是底部。这很傻。

Answer 1

出现边界的解释：

• 您的div尺寸为280毫米x 80毫米。比例（280/80）为3.5。
• 您的page尺寸为320毫米x 120毫米。比例（320/120）是2.67。

当您要求Chrome移除页面中的边距时，您最终会得到一个div，其大小和比例相同（3.5），并且缩小page会尝试适合{{ 1}} in，但页面大小仍然是2.67比例。这解释了神奇地出现的边缘。

我正在努力解决这个问题，但这应该会让你走上正轨。祝你好运！

更新

而是阅读更新＃2。

使用我在那里解释的内容创建了一个pastebin：http://pastebin.com/48RqpBFV 我为你的页面尺寸增加了1毫米（现在它的尺寸为102毫米）因为： 体型：99/74 = 1,33784 但页面大小：101/76 = / = 1,33784 将此1毫米添加到页面宽度可修复边框。

更新＃2

http://pastebin.com/Dq837cXp与您的第二个模型的最终pastebin。我使用了以下修复：

div

并将@page { size: 101.6mm 76mm; padding: 0; margin:1mm; border: none; border-collapse: collapse; } 添加到max-height:100%;。令人惊讶的是，您实际上可以为毫微米添加更多数字。 101.6毫米使它完全符合你想要的比例，.reportBody阻止Chrome制作另一个页面。

Answer 2

我将.reportTable的大小调整了几个mm，并且从Chrome中的打印预览中删除了额外的空格。

在：

在：

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

看起来table没有占据body设置的整个区域，并且浏览器可以看到额外的空间。也许是Chrome功能？