CSS设置A4纸张大小
在网页上模拟A4纸，需要允许打印此页面。 这是因为它显示在浏览器中，特别是Chrome中。 您已将元素大小设置为21厘米29.7厘米，但当您发送打印(或打印预览)时，页面将被剪切。
看看这个现场的例子！
HTML
Page 1/2 Page 2/2 CSS
body { margin: 0； padding: 0； background-color: #FAFAFA； font: 12pt 'Tahoma '； } * { box-sizing: border-box； -moz-box-sizing: border-box； } .page { width: 21cm； 最小高度： 29.7厘米； padding: 2cm厘米； 边距： 1cm自动； border : 1px # d3d3d 3固态硬盘； border-radius: 5px； background:白色； box-shadow :005 px rgba (0，0，0，0.1 )； } .subpage { padding: 1cm； border: 5px red solid； height: 256mm； outline: 2cm #FFEAEA solid； } @page { size: A4； 边距： 0； } @ media print {.page { margin : 0； border :初始化； border-radius :初始化； width :初始化； 最小高度：初始； box-shadow: initial； 后台：初始化； page-break-after: always； }
我想我忘了什么。 但是会变成什么呢？
Chrome :裁剪页面，使之成为双页(这就是我需要它的工作) )。
Firefox :是完美的工作。
ie10 :不要pipe，真不敢相信，这太完美了！
Opera :打印预览很麻烦
我更深入地研究了这个。 实际的问题似乎是在打印媒体规则下分配initial页面width。 Chrome的width: initial中的. page页面元素看起来引起了页面内容的缩放。 如果父元素的width3360initial没有定义特定长度的值，则parsing将使用width: auto … .
因此，页面内容太长(不仅约2厘米，而且页面填充比前2厘米稍多) ) width: auto将整个内容从width: auto缩放到宽到196毫米，宽到210毫米
要解决此问题，您可以在打印介质规则中将A4纸张的宽度和高度指定为html、body或直接. page，并避免使用initial关键字。
德莫
@page { size: A4； 边距： 0； } @media print { html，body { width: 210mm； height: 297mm； (/)…therestoftherules…)/) }
这似乎保持了原来的CSS，修复了Chrome的问题。 (在Windows，OS X和Ubuntu下的不同版本的Chrome中进行了测试。
CSS
body { background : RGB (204、204、204 )； } page [ size=' a4 ' ] { background : white； width: 21cm厘米； height: 29.7cm厘米； 显示：块； 边距： 0自动； 边距- bottom : 0.5厘米； box-shadow :00.5 CMR GBA (0，0，0，0.5； } @media print { body，page[size='A4'] { margin: 0； 盒- shadow : 0； }
HTML
德莫