CSS 设置 A4 纸张大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16649943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to set A4 paper size
提问by David Rodrigues
I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page.
我需要在网络中模拟一张 A4 纸，并允许打印此页面，因为它在浏览器（特别是 Chrome）上显示。我将元素大小设置为 21 厘米 x 29.7 厘米，但是当我发送打印（或打印预览）时，它会剪辑我的页面。
See this Live example!
看到这个现场例子！
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;
}
}<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>I think I'm forgetting something. But what would it be?
我想我忘记了什么。但它会是什么？
- Chrome: clipping page, double page (it's just what I need it to work)
- Firefox: it works perfectly.
- IE10: believe it or not, it's perfect!
- Opera: very buggy on print preview
- Chrome：剪裁页面，双页（这正是我需要它工作的）
- 火狐：它完美地工作。
- IE10：信不信由你，它是完美的！
- Opera：在打印预览上有很多问题
回答by Martin Turjak
I looked into this a bit more and the actual problem seems to be with assigning initialto page widthunder the printmedia rule. It seems like in Chrome width: initialon the .pageelement results in scalingof the page content if no specific length value is defined for widthon any of the parent elements (width: initialin this case resolves to width: auto... but actually any value smaller than the size defined under the @pagerule causes the same issue).
我对此进行了更多研究，实际问题似乎是在媒体规则下分配initial给页面。如果没有为任何父元素定义特定的长度值（在这种情况下解析为......但实际上任何小于规则下定义的大小的值），似乎在元素上的Chrome中会导致页面内容的缩放导致同样的问题）。widthprintwidth: initial.pagewidthwidth: initialwidth: auto@page
So not only the content is now too longfor the page (by about 2cm), but also the page padding will be slightly more than the initial 2cmand so on (it seems to render the contents under width: autoto the width of ~196mmand then scale the whole content up to the width of 210mm~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm).
因此，不仅内容现在对于页面来说太长（大约2cm），而且页面填充将比初始内容略多2cm等等（它似乎将内容渲染width: auto到 的宽度，~196mm然后缩放整个内容直到 ~ 的宽度，210mm但奇怪的是完全相同的缩放因子应用于任何宽度小于210mm) 的内容。
To fix this problem you can simply in the printmedia rule assign the A4 paper width and hight to html, bodyor directly to .pageand in this case avoid the initialkeyword.
要解决此问题，您可以简单地在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 ... */
}
This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).
这似乎使其他所有内容都保持在原始 CSS 中的方式并修复 Chrome 中的问题（在 Windows、OS X 和 Ubuntu 下的不同版本的 Chrome 中进行了测试）。
回答by MaxEcho
CSS
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
HTML
<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>
回答by Mark Boulder
https://github.com/cognitom/paper-cssseems to solve all my needs.
https://github.com/cognitom/paper-css似乎解决了我的所有需求。
Paper CSS for happy printing
用于快乐打印的纸张 CSS
Front-end printing solution - previewable and live-reloadable!
前端打印解决方案 - 可预览且可实时重新加载！
