CSS设置A4纸张大小
我需要在网页中模拟一张A4纸，并允许打印此页面，因为它是在浏览器（特别是Chrome）上显示的。 我将元素大小设置为21厘米x 29.7厘米，但是当我发送打印（或打印预览）它剪辑我的页面。
看到这个现场的例子 ！
HTML
<div class="book"> <div class="page"> <div class="subpage">Page 1/2</div> </div> <div class="page"> <div class="subpage">Page 2/2</div> </div> </div> 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; } @page { size: A4; margin: 0; } @media print { .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } }
我想我忘记了一些东西。 但是会是什么？
- Chrome ：裁剪页面，双页面（ 这正是我需要它的工作 ）
- Firefox ：它完美的工作。
- IE10 ：不pipe你信不信，这是完美的！
- Opera ：打印预览很麻烦
我更深入地研究了这一点，实际的问题似乎是在print介质规则下分配initial页面width 。 它看起来像在Chrome中的width: initial的.page页面元素导致页面内容的缩放 ，如果任何父元素的width: initial没有定义特定的长度值（ width: initial在这种情况下parsing为width: auto …但实际上任何小于@page规则下定义的值@page导致相同的问题）。
因此，不仅页面的内容太长 （大约2cm ），而且页面填充将比最初的2cm略微更多，等等（似乎将内容呈现在width: auto下width: auto到宽度~196mm然后将整个内容缩放到210mm的宽度，但是对于任何宽度小于210mm内容物都应用了相同的比例因子）。
要解决这个问题，你可以简单地在print介质规则中指定A4纸的宽度和高度为html, body或直接为.page并在这种情况下避免initial关键字。
DEMO
@page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } /* ... the rest of the rules ... */ }
这似乎保持了原来的CSS，并修复了Chrome中的问题（在Windows，OS X和Ubuntu下的不同版本的Chrome中进行了testing）。
CSS
body { background: rgb(204,204,204); } page[size="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); } @media print { body, page[size="A4"] { margin: 0; box-shadow: 0; } }
HTML
<page size="A4"></page> <page size="A4"></page> <page size="A4"></page>
DEMO
