为了账号安全,请及时绑定邮箱和手机立即绑定

CSS设置A4纸张尺寸

CSS设置A4纸张尺寸

慕标5832272 2019-08-14 17:02:55
CSS设置A4纸张尺寸我需要在网络上模拟A4纸,并允许打印此页面,因为它在浏览器上显示(特别是Chrome)。我将元素大小设置为21cm x 29.7cm,但是当我发送到打印(或打印预览)时,它会剪切我的页面。看到这个实例!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:在打印预览上非常错误
查看完整描述

3 回答

?
婷婷同学_

TA贡献1844条经验 获得超8个赞

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


查看完整回答
反对 回复 2019-08-14
  • 3 回答
  • 0 关注
  • 6359 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信