htmla4纸张大小像素,CSS设置A4纸张大小

CSS设置A4纸张大小

我需要在网页中模拟一张A4纸&＃xff0c;并允许打印此页面&＃xff0c;因为它是在浏览器(特别是Chrome)上显示的。 我将元素大小设置为21厘米x 29.7厘米&＃xff0c;但是当我发送打印(或打印预览)它剪辑我的页面。

看到这个现场的例子 &＃xff01;

HTML

CSS

body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .subpage { padding: 1cm; border: 5px red solid; height: 256mm; outline: 2cm #FFEAEA solid; } &＃64;page { size: A4; margin: 0; } &＃64;media print { .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } }

我想我忘记了一些东西。 但是会是什么&＃xff1f;

Chrome &＃xff1a;裁剪页面&＃xff0c;双页面( 这正是我需要它的工作 )

Firefox &＃xff1a;它完美的工作。

IE10 &＃xff1a;不pipe你信不信&＃xff0c;这是完美的&＃xff01;

Opera &＃xff1a;打印预览很麻烦

我更深入地研究了这一点&＃xff0c;实际的问题似乎是在print介质规则下分配initial页面width 。 它看起来像在Chrome中的width: initial的.page页面元素导致页面内容的缩放 &＃xff0c;如果任何父元素的width: initial没有定义特定的长度值( width: initial在这种情况下parsing为width: auto …但实际上任何小于&＃64;page规则下定义的值&＃64;page导致相同的问题)。

因此&＃xff0c;不仅页面的内容太长 (大约2cm )&＃xff0c;而且页面填充将比最初的2cm略微更多&＃xff0c;等等(似乎将内容呈现在width: auto下width: auto到宽度~196mm然后将整个内容缩放到210mm的宽度&＃xff0c;但是对于任何宽度小于210mm内容物都应用了相同的比例因子)。

要解决这个问题&＃xff0c;你可以简单地在print介质规则中指定A4纸的宽度和高度为html, body或直接为.page并在这种情况下避免initial关键字。

DEMO

&＃64;page { size: A4; margin: 0; } &＃64;media print { html, body { width: 210mm; height: 297mm; } /* ... the rest of the rules ... */ }

这似乎保持了原来的CSS&＃xff0c;并修复了Chrome中的问题(在Windows&＃xff0c;OS X和Ubuntu下的不同版本的Chrome中进行了testing)。

CSS

body { background: rgb(204,204,204); } page[size&＃61;"A4"] { background: white; width: 21cm; height: 29.7cm; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); } &＃64;media print { body, page[size&＃61;"A4"] { margin: 0; box-shadow: 0; } }

HTML

DEMO