我需要模拟一个A4纸在网络上，并允许打印这一页，因为它是显示在浏览器（铬，特别是）。我将元素大小设置为21cm x 29.7cm，但当我发送打印（或打印预览）时，它会剪辑我的页面
查看此实时示例
正文{
保证金：0；
填充：0；
背景色：#FAFAFA；
字体：12pt“塔荷马”；
}
* {
框大小：边框框；
-moz框大小：边框框；
}
.第页{
宽度：21cm；
最小高度：29.7厘米；
填料：2cm；
保证金：1厘米自动；
边框：1px#d3实心；
边界半径：5px；
背景：白色；
长方体阴影：0.5pxRGBA（0,0,0,0.1）；
}
.子页{
填料：1cm；
边框：5px红色实心；
高度：256mm；
轮廓：2cm#ffeea实心；
}
@页面{
尺寸：A4；
保证金：0；
}
@媒体印刷品{
.第页{
保证金：0；
边界：首字母；
边界半径：初始；
宽度：首字母；
最小高度：初始高度；
盒影：首字母；
背景：初始；
分页符后：始终；
}
}<；div class=“book”>；
<；div class=“page”>；
<；div class=“子页面”>；第1页，共2页</部门>；
</部门>；
<；div class=“page”>；
<；div class=“子页面”>；第2页，共2页</部门>；
</部门>；
</部门>我想我忘了什么。但是会是什么呢
- Chrome：剪切页面，双页面（这正是我需要它工作的地方）
- Firefox：它工作得非常完美
- IE10：信不信由你，它太完美了
- Opera：打印预览版上有很多错误
我仔细研究了一下，实际的问题似乎是在打印媒体规则下，将初始分配给页面宽度。在Chromewidth:initial上的。如果没有为任何父元素上的元素会导致页面内容的缩放（width定义特定的长度值，则pagewidth:initial在本例中解析为width:auto…但实际上任何小于@page规则下定义的大小的值都会导致相同的问题）
因此，不仅现在页面的内容太长（大约为<2cm），而且页面的填充将略大于初始的<2cm，以此类推（它似乎将width:auto下的内容渲染到~196mm的宽度，然后将整个内容缩放到210mm的宽度，但奇怪的是，对于任何宽度小于210mm的内容，都应用了完全相同的缩放因子）
要解决此问题，您只需在打印介质规则中将A4纸张的宽度和高度指定给html，body或直接指定给.page，在这种情况下，请避免使用initial关键字
演示
@页{
尺寸：A4；
保证金：0；
}
@媒体印刷品{
html，正文{
宽度：210毫米；
高度：297mm；
}
/*…其余的规则*/
}
这似乎保持了原始CSS中的所有内容，并修复了Chrome中的问题（在Windows、OS X和Ubuntu下的不同版本的Chrome中进行了测试）。