Tôi cần mô phỏng một tờ giấy A4 trong web và cho phép in trang này vì nó được hiển thị trên trình duyệt (cụ thể là Chrome). Tôi đặt kích thước phần tử là 21cm x 29,7cm, nhưng khi tôi gửi để in (hoặc in xem trước) nó sẽ cắt trang của tôi.

Xem ví dụ trực tiếp này !

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>

Tôi nghĩ rằng tôi đang quên một cái gì đó. Nhưng nó sẽ là gì?

• Chrome : cắt trang, trang kép ( đó chỉ là những gì tôi cần để hoạt động )
• Firefox : nó hoạt động hoàn hảo.
• IE10 : tin hay không, nó hoàn hảo!
• Opera : rất có lỗi khi xem trước bản in

Tôi đã xem xét vấn đề này nhiều hơn một chút và vấn đề thực tế dường như là việc gán initialcho trang widththeo printquy tắc truyền thông. Có vẻ như trong Chrome width: initialvề .pagephần tử dẫn đến việc chia tỷ lệ nội dung trang nếu không xác định giá trị độ dài cụ thể cho widthbất kỳ phần tử cha nào ( width: initialtrong trường hợp này sẽ giải quyết width: auto... nhưng thực tế là bất kỳ giá trị nào nhỏ hơn kích thước được xác định theo @pagequy tắc gây ra vấn đề tương tự).

Vì vậy, không chỉ nội dung bây giờ quá dài đối với trang (khoảng 2cm), mà cả phần đệm trang sẽ hơi nhiều so với ban đầu 2cmvà cứ thế (dường như hiển thị nội dung theo width: autochiều rộng ~196mmvà sau đó thu nhỏ toàn bộ nội dung lên đến chiều rộng của 210mm~ nhưng chính xác một cách chính xác hệ số tỷ lệ tương tự được áp dụng cho các nội dung có chiều rộng nhỏ hơn 210mm).

Để khắc phục vấn đề này, bạn có thể chỉ cần trong printquy tắc phương tiện chỉ định chiều rộng giấy A4 và cao html, bodyhoặc trực tiếp đến .pagevà trong trường hợp này tránh initialtừ khóa.

BẢN GIỚI THIỆU

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{Điều này dường như giữ mọi thứ khác như trong CSS gốc của bạn và khắc phục sự cố trong Chrome (được thử nghiệm trong các phiên bản Chrome khác nhau trong Windows, OS X và Ubuntu).}

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>

BẢN GIỚI THIỆU

https://github.com/cognitom/apers-css dường như giải quyết tất cả các nhu cầu của tôi.

CSS giấy để in hạnh phúc

Giải pháp in ấn mặt trước - có thể xem trước và tải lại trực tiếp!