我对此进行了更多研究,实际的问题似乎是在媒体规则下分配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;
}
/* ... the rest of the rules ... */
}