当将 html 元素打印到 A4 尺寸的纸张上时，我无法理解如何以正确的尺寸呈现 html 元素。
为了说明我的目的，我将代码简化为一个 html 页面，其中包含一个红色边框的表格，该表格的尺寸应为 210mmx297mm（A4 纸张尺寸）：
<!DOCTYPE html>
<html>
<head>
<style>
@page
{
size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */
}
html, body
{
width: 210mm;
padding:0;
margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */
}
html
{
background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
}
table
{
width:100%;
height:297mm;
-moz-box-sizing: border-box;
border: solid 3px red;
border-spacing:0;
border-collapse: collapse;
}
td
{
padding: 0;
text-align: center;
box-shadow: inset 0 0 0 1000px white;
}
</style>
</head>
<body>
<table><tr><td>Hello world!</td></tr></table>
</body>
</html>
我尝试在CSS中将尺寸强制设置为210mmx297mm，但仍然有问题。我不知道它是什么......要么是渲染引擎中的错误，要么是我的代码中缺少设置。
Note
从上下文来看，我试图创建全部采用 html+css+javascript 的自动报告，以便可以轻松地查看它们并最终从网络浏览器打印为 pdf 或纸张。封面页应在 A4 纸的边缘填充一些图像。
这是一些更完整的示例：
示例（JSFiddle）
我快到了，所有内容都在屏幕上很好地显示（firefox+chrome），但打印时仍然有这些边距（打印仅适用于 firefox+nomargin+adaptsize... chrome 因打印时重复表页眉/页脚而被窃听）。
您正在解决一个难题，该问题是许多程序员的祸根。从 HTML 打印并确保与不同浏览器的兼容性基本上是独角兽。你不应该自己处理这个问题。 CSS 样式的怪癖和浏览器生态系统的碎片化将确保您不会成功。
我的建议是你看一下 PDF 生成器 API，例如PDF Kit or iText.
根据我的研究，页面和表单打印在 Firefox 上尤其存在问题。正如您从第一手经验中注意到的那样，您无法以理智的方式管理利润。我也尝试使用 Firefox 49.0.2，但没有成功。
我想过使用@media print{}但 Firefox 不愿意合作。
话虽这么说，你的代码对于我在你提到的版本上运行 Chrome 来说工作得很好。请注意，我将边距设置为“无”。
