CSS设置A4纸张尺寸 [英] CSS to set A4 paper size
问题描述
我需要在网络上模拟A4纸,并允许打印此页面,因为它在浏览器上显示(特别是Chrome)。我将元素大小设置为21cm x 29.7cm,但是当我发送到打印(或打印预览)时,它会剪切我的页面。
HTML
< div class =book>
< div class =page>
< div class =subpage>第1页/ 2< / div>
< / div>
< div class =page>
< div class =subpage>第2页/ 2< / div>
< / div>
< / div>
CSS
body {
margin:0;
padding:0;
background-color:#FAFAFA;
font:12ptTahoma;
}
* {
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;
}
}
我想我忘了什么。
: :在打印预览时非常麻烦
我进一步研究这一点,实际的问题似乎是分配初始
在打印
媒体规则下的 width
看起来像 .page
元素中的Chrome width:initial
会导致 ( width:initial
)为 width
定义特定长度值时, code>在这种情况下解析为 width:auto
...但实际上任何小于 @page
。 (大约
2cm
),但是页面填充将比初始 2cm
等(似乎将 width:auto
下的内容呈现为 〜196mm
,然后将整个内容缩放到 210mm
对于任何宽度小于 210mm
的内容都应用完全相同的缩放因子。
要解决这个问题,你可以简单地在打印
媒体规则分配A4纸宽度和hight到 html,正文
或直接到 .page
,在这种情况下避免初始
关键字。
DEMO
@page {
size:A4;
margin:0;
}
@media print {
html,正文{
width:210mm;
height:297mm;
}
/ * ...其余规则... * /
}
这似乎保留了原始CSS中的一切,并解决Chrome中的问题(在Windows,OS X和Ubuntu下在不同版本的Chrome中测试)。
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.
See this Live example!
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;
}
}
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
I looked into this a bit more and the actual problem seems to be with assigning initial
to page width
under the print
media rule. It seems like in Chrome width: initial
on the .page
element results in scaling of the page content if no specific length value is defined for width
on any of the parent elements (width: initial
in this case resolves to width: auto
... but actually any value smaller than the size defined under the @page
rule causes the same issue).
So not only the content is now too long for the page (by about 2cm
), but also the page padding will be slightly more than the initial 2cm
and so on (it seems to render the contents under width: auto
to the width of ~196mm
and 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
).
To fix this problem you can simply in the print
media rule assign the A4 paper width and hight to html, body
or directly to .page
and in this case avoid the initial
keyword.
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设置A4纸张尺寸的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!