Tôi cần mô phỏng một bài báo A4 trên 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ử thành 21cm x 29,7cm, nhưng khi tôi gửi để in (hoặc xem trước in), nó clip trang của tôi. Xem ví dụ trực tiếp này!Live
example! 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: trang cắt, trang đôi (đó chỉ là những gì tôi cần nó để làm việc): clipping page, double page (it's just what I need it to work)
- Firefox: Nó hoạt động hoàn hảo.: it works perfectly.
- IE10: Tin hay không, nó hoàn hảo!: believe it or not, it's perfect!
- Opera: rất lỗi khi xem trước in: very buggy on print preview
Syscall 18.3k10 Huy hiệu vàng33 Huy hiệu bạc49 Huy hiệu đồng10 gold badges33 silver badges49 bronze badges Khi được hỏi ngày 20 tháng 5 năm 2013 lúc 12:51May 20, 2013 at 12:51 David Rodriguesdavid ColeuesDavid Rodrigues 11.6K15 Huy hiệu vàng56 Huy hiệu bạc90 Huy hiệu Đồng15 gold badges56 silver badges90 bronze badges 3 Tôi đã xem xét điều này nhiều hơn một chút và vấn đề thực tế dường như là với việc gán initial cho trang width theo quy tắc truyền thông print. Có vẻ như trong Chrome width: initial trên phần tử .page dẫn đến việc mở rộng nội dung trang nếu không có giá trị độ dài cụ thể nào được xác định cho width trên bất kỳ phần tử mẹ nào (width: initial trong trường hợp này được giải quyết thành <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>
2 ... nhưng thực sự bất kỳ giá trị nào nhỏ hơn Kích thước được xác định theo quy tắc <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>
3 gây ra cùng một vấn đề).scaling of the page content if no specific length value is defined for width on any of the parent elements (width: initial in this case resolves to <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>
2 ... but
actually any value smaller than the size defined under the <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>
3 rule causes the same issue).Vì vậy, không chỉ nội dung bây giờ quá dài cho trang (khoảng <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>
4), mà cả phần đệm trang sẽ còn nhiều hơn một chút so với <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>
4 ban đầu, v.v. Tỷ lệ toàn bộ nội dung lên đến chiều rộng của <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>
8 ~ nhưng kỳ lạ chính xác cùng một hệ số tỷ lệ được áp dụng cho các nội dung có bất kỳ chiều rộng nào nhỏ hơn <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>
8).too long for the page (by about <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>
4), but also the page padding will be slightly more than the initial <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>
4 and so on (it seems to render the contents under <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>
2 to the width of <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>
7 and then scale the whole content up to the width of <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>
8 ~ but strangely exactly the same scaling
factor is applied to contents with any width smaller than <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>
8).Để khắc phục sự cố này, bạn chỉ có thể trong Quy tắc phương tiện print gán chiều rộng giấy A4 và độ cao cho @page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
/* ... the rest of the rules ... */
}
1 hoặc trực tiếp cho .page và trong trường hợp này, hãy tránh từ khóa initial.THỬ NGHIỆM@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 ban đầu của bạn và khắc phục sự cố trong Chrome (được thử nghiệm trong các phiên bản khác nhau của Chrome trong Windows, OS X và Ubuntu). Đã trả lời ngày 20 tháng 5 năm 2013 lúc 13:18May 20, 2013 at 13:18
Martin Turjakmartin TurjakMartin Turjak 20.6K5 Huy hiệu vàng55 Huy hiệu bạc76 Huy hiệu đồng5 gold badges55 silver badges76 bronze badges 14 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>
THỬ NGHIỆM Điều này dường như giữ mọi thứ khác như trong CSS ban đầu của bạn và khắc phục sự cố trong Chrome (được thử nghiệm trong các phiên bản khác nhau của Chrome trong Windows, OS X và Ubuntu).May 20, 2015 at 9:34 2 Đã trả lời ngày 20 tháng 5 năm 2013 lúc 13:18 Martin Turjakmartin Turjak20.6K5 Huy hiệu vàng55 Huy hiệu bạc76 Huy hiệu đồng
CSSMay 9, 2017 at 14:53 HTMLMark Boulder Đã trả lời ngày 20 tháng 5 năm 2015 lúc 9:3411 gold badges45 silver badges76 bronze badges 0
Kích thước A4 trong PX là gì?
Hướng dẫn kích thước giấy. @Page làm gì trong CSS?
R-Rule @page là một quy tắc CSS được sử dụng để sửa đổi các khía cạnh khác nhau của thuộc tính trang in.Nó nhắm mục tiêu và sửa đổi kích thước của trang, hướng trang và lề.R-Rule @page có thể được sử dụng để nhắm mục tiêu tất cả các trang trong bản in hoặc thậm chí các trang cụ thể bằng cách sử dụng các lớp giả khác nhau.modify different aspects of a printed page property. It targets and modifies the page's dimensions, page orientation, and margins. The @page at-rule can be used to target all pages in a print-out, or even specific ones using its various pseudo-classes.
Làm cách nào để thay đổi kích thước trang thành A4 trong HTML?
Làm cách nào để thay đổi kích thước trang trong CSS?
Để thay đổi chiều rộng trang mặc định, hãy làm theo các bước sau:.. Trong mô -đun trang web, nhấp vào tùy chọn CSS ở đầu màn hình .. Trong trường biên tập, dán mã sau: .... Thay đổi giá trị 1200 thành bất kỳ chiều rộng nào bạn muốn.hoặc bất cứ phần trăm nào bạn muốn..... Nhấp vào Lưu để lưu các thay đổi của bạn .. | 
