CSS 设置 A4 纸张大小 [英] CSS to set A4 paper size
问题描述
我需要在网络中模拟一张 A4 纸，并允许打印此页面，因为它在浏览器(特别是 Chrome)上显示.我将元素大小设置为 21 厘米 x 29.7 厘米，但是当我发送打印(或打印预览)时，它会夹住我的页面.
查看此实例！
body {边距:0；填充:0；背景颜色:#FAFAFA；字体:12ptTahoma"；}* {box-sizing: 边框框；-moz-box-sizing: 边框框；}.页 {宽度:21cm；最小高度:29.7cm；填充:2cm；边距:1cm自动；边框:1px #D3D3D3 实心；边框半径:5px；背景:白色；box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}.subpage {填充:1cm；边框:5px 红色实心；高度:256mm；轮廓:2cm #FFEAEA 实心；}@页 {尺寸:A4；边距:0；}@media 打印 {.页 {边距:0；边界:初始；边界半径:初始；宽度:初始；最小高度:初始；box-shadow:初始；背景:初始；分页后:总是；}}<div class="page"><div class="subpage">第 1/2 页</div><div class="page"><div class="subpage">第 2/2 页</div>
我想我忘记了什么.但它会是什么?
- Chrome:剪裁页面、双页(这正是我需要的功能)
- Firefox:完美运行.
- IE10:信不信由你，它是完美的！
- Opera:在打印预览上有很多问题
我对此进行了更多研究，实际问题似乎是将 initial 分配给页面 width 在 print 媒体规则下.似乎在 Chrome width: initial 中 .page 元素会导致页面内容的 缩放 如果没有在任何父元素上为 width 定义了特定的长度值(在这种情况下，width: initial 解析为 width: auto ... 但是实际上，任何小于 @page 规则下定义的大小的值都会导致相同的问题).
所以不仅内容现在对于页面来说太长(大约2cm)，而且页面内边距也会比初始的 2cm 稍微多一些(似乎是将 width: auto 下的内容渲染到宽度~196mm 然后将整个内容缩放到 210mm 的宽度 ~ 但奇怪的是完全相同的缩放比例factor 适用于任何宽度小于 210mm 的内容.
要解决此问题，您只需在 print 媒体规则中将 A4 纸的宽度和高度分配给 html, body 或直接分配给 .page，在这种情况下避免使用 initial 关键字.
演示
@page {尺寸:A4；边距:0；}@media 打印 {html，正文{宽度:210mm；高度: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!
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
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屋！
