others - CSS设置A4纸张大小

我需要在web上模拟A4纸张,并允许打印此页面,我将元素大小设置为21cm x29.7 cm,但是,当我发送到打印机(或者打印预览)时,页面被剪辑掉了。

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:完美工作!
  • Opera:打印预览错误

时间:

我查看了这点,实际问题是将initial分配给页面widthprint媒体规则下,

演示


@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中测试)。

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>

...