CSS 设置 A4 纸张大小
Posted
技术标签:
【中文标题】CSS 设置 A4 纸张大小【英文标题】:CSS to set A4 paper size 【发布时间】:2013-05-15 00:51:57 【问题描述】:我需要在网络上模拟一张 A4 纸,并允许打印该页面,因为它在浏览器(特别是 Chrome)上显示。我将元素大小设置为 21 厘米 x 29.7 厘米,但是当我发送打印(或打印预览)时,它会剪切我的页面。
看到这个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>
我想我忘记了什么。但它会是什么?
Chrome:剪裁页、双页(正是我需要它来工作) Firefox:完美运行。 IE10:信不信由你,它是完美的! Opera:打印预览有很多错误【问题讨论】:
正确答案在这里:***.com/a/34018790/293856 可能欺骗:***.com/questions/3341485/… bug report 关于这个 【参考方案1】:我对此进行了更多研究,实际问题似乎是在print
媒体规则下将initial
分配给页面width
。如果没有为 width
在任何父元素(在这种情况下width: initial
解析为width: auto
...但实际上任何小于@page
规则下定义的大小的值都会导致同样的问题)。
所以现在不仅页面内容太长(大约2cm
),而且页面填充也会比最初的 2cm
稍微多一点等等(好像是把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 中测试)。
【讨论】:
您是如何获得256mm
(最终是237mm
)的.subpage
元素?
嘿@MartinTurjak,我把你的小提琴调成了美国字母版本,以防有人感兴趣。 jsfiddle.net/2wk6Q/2957干杯!
@Brad:对我不起作用。仍然在每个页面之间创建一个空白页面。
在我的应用程序中完美运行。顺便说一下,JSFiddle 很不错 - 打印预览看起来很干净,我差点从椅子上摔下来。
我在上面犯了错误。你不能真正删除它。只需将 min-height: 297mm 更改为 max-height: 296mm;在 .page 类中。这将对双页问题进行排序。【参考方案2】:
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
【讨论】:
旁注:<page>
不是valid custom HTML element name
似乎有效。但是box-shadow: 0;
不起作用(至少在 Chrome 中),它应该是box-shadow: none;
。两个边距声明也可以合并成margin: 0 auto 0.5cm;
。【参考方案3】:
https://github.com/cognitom/paper-css 似乎可以解决我的所有需求。
用于快乐打印的纸质 CSS
前端打印解决方案 - 可预览和实时重新加载!
【讨论】:
以上是关于CSS 设置 A4 纸张大小的主要内容,如果未能解决你的问题,请参考以下文章