CSS设定A4纸张大小_随笔

CSS设定A4纸张大小

我对此进行了更多研究，实际的问题似乎是在媒体规则下分配

initial

给页面。如果没有在任何父元素上定义特定的长度值（在这种情况下，解析为…但实际上小于规则中定义的大小的任何值），则在Chrome中，似乎该元素会导致页面内容
缩放导致相同的问题）。

width``print``width: initial``.page

width``width:initial``width: auto``@page

因此，不仅内容现在对于页面 来说太长 了（大约

2cm

），而且页面填充也将比初始内容稍大 2cm

，以此类推（它似乎将内容渲染

width: auto

为的宽度， ~196mm
然后按比例缩放整个内容直到〜的宽度， 210mm

但奇怪的是，相同的缩放比例应用于任何宽度小于的内容 210mm
。

要解决此问题，您只需在

print

媒体规则中将A4纸的宽度和高度分配给

html,body

或直接分配给A4纸宽度和高度

.page

，在这种情况下，避免使用

initial

关键字。

@page {  size: A4;  margin: 0;}@media print {  html, body {    width: 210mm;    height: 297mm;  }  }

这似乎可以将所有其他内容保留在原始CSS中，并解决了Chrome中的问题（已在Windows，OS
X和Ubuntu下在不同版本的Chrome中进行了测试）。

欢迎分享，转载请注明来源：内存溢出

CSS设定A4纸张大小