Trang CSS-Break không hoạt động trên tất cả các trình duyệt

Question

Tôi gặp sự cố khi làm việc này trong hầu hết các trình duyệt, ngoại trừ IE (thậm chí nó hoạt động chính xác trong IE6) và Opera.

Firefox tách div một cách chính xác nhưng chỉ in trang đầu tiên.

Chrome và Safari chỉ áp dụng ngắt trang cho div cuối cùng.

Làm cách nào để làm việc này trên tất cả các trình duyệt chính xác?

HTML:

<div id="leftNav"> 
    <ul> 
    <!--links etc--> 
    </ul> 
</div> 
<div id="mainBody"> 
<div id="container"> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
</div> 
</div> 

Các divs với các ID #leftNav và #mainBody đang được thiết lập để float:left, vì vậy họ hiển thị độc đáo.

Tôi chỉ muốn in các lớp .pageBreak, ẩn #leftNav và phần còn lại của #mainBody bằng CSS.

CSS:

@media print 
{ 
#leftNav 
{ 
    display:none; 
} 
#mainBody 
{ 
    border:none; 
    margin:none; 
    padding:none; 
} 
} 

Answer 1

Các yếu tố mẹ không thể nổi trên chúng.

Đặt float:none trên tất cả các thành phần gốc làm cho page-break-before:always hoạt động chính xác.

Những thứ khác có thể ngắt trang là: sử dụng ngắt trang bên trong bảng, phần tử thả nổi, thành phần khối nội tuyến và chặn các phần tử có đường viền.

Answer 2

mã của bạn là gì?
như thế này ?:

<style> 
@media print 
{ 
table {page-break-after:always} 
} 
@media print 
{ 
table {page-break-before:always} 
} 
</style> 
 

hỗ trợ

Answer 3

"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values." IE cũng là một phần bạn có thể đạt được những gì cần thiết bởi: trang-break-trước: luôn; được hỗ trợ trong tất cả các trình duyệt "nhưng chỉ in trang đầu tiên": Tôi không nghĩ rằng đó là css liên quan, tôi cho rằng đó là sth trên cửa sổ in của trình duyệt :)

Answer 4

Vì mục đích hoàn thành và vì lợi ích của những người khác có cùng vấn đề, tôi chỉ muốn thêm rằng tôi cũng phải thêm overflow: visible vào thẻ body để FireFox tuân theo các ngắt trang và thậm chí để in nhiều hơn chỉ là trang đầu tiên.

Answer 5

Mặc dù đây không phải là tài liệu nổi bật, cần lưu ý rằng các thuộc tính ngắt trang không thể được áp dụng cho các phần tử bảng. Nếu bạn có bất kỳ thành phần nào có display: table; hoặc display:table-cell; áp dụng cho chúng (thường gặp trong nhiều mẫu trong lớp clearfix) thì các phần tử được chứa sẽ bỏ qua các quy tắc ngắt trang. Chỉ cần hủy bỏ các quy tắc trong bản định kiểu in của bạn và bạn nên được ok (sau khi phao cũng đã được gỡ bỏ, tất nhiên!).

Dưới đây là ví dụ về cách thực hiện việc này cho vấn đề giải mã phổ biến.

.clearfix:before, .clearfix:after{ 
    display: block!important; 
} 

EDIT: Tôi quên thêm rằng nơi khác tôi đã chạy vào trong này là khi các mẫu tuyên bố toàn bộ trang (thường được gọi là chính hay chính wrapper) với display:inline-block;

Nếu phần bên trong của một khối nội tuyến, nó sẽ không hoạt động để giữ cho đôi mắt của bạn mở cho những người là tốt. Thay đổi hoặc ghi đè display:inline-block; với display:block sẽ hoạt động.

Hy vọng điều này sẽ hữu ích!

~ techdude

Answer 6

Tôi đã có một position: absolute; trong việc in ấn div gây ra điều này không phải để làm việc.

Answer 7

Tôi đã phát hiện thấy rằng các lớp học Khởi động Twitter thêm một loạt nội dung vào trang khiến việc ngắt trang trở nên khó khăn. Firefox đã làm việc ngay lập tức, nhưng tôi đã phải làm theo các đề xuất khác nhau để làm cho nó hoạt động trong Chrome và cuối cùng là IE (11).

Tôi đã làm theo các đề xuất ở đây và ở nơi khác. Tài sản duy nhất tôi "khám phá ra" mà tôi chưa thấy được đề cập đến là "kích thước hộp". Bootstrap có thể thiết lập thuộc tính này thành "box-sizing: border-box", đã phá vỡ IE. Cài đặt thân thiện với trình duyệt IE là "hộp kích thước: hộp nội dung". Tôi đã được dẫn đến điều này bởi caveat về "khối yếu tố với biên giới" được thực hiện bởi Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.

Có vẻ như đó là một chút của cuộc chạy đua vũ trang để khám phá thuộc tính tiếp theo có thể phá vỡ ngắt trang.

Đây là cài đặt phù hợp với tôi (Chrome, FF, IE 11). Về cơ bản, nó cố gắng ghi đè lên tất cả các cài đặt có vấn đề trên tất cả các div trên trang được in. Tất nhiên, điều này cũng có thể phá vỡ định dạng của bạn và điều đó có nghĩa là bạn sẽ phải tìm một cách khác để thiết lập trang.

@media print { 

    div { float: none !important; position: static !important; display: inline; 
      box-sizing: content-box !important; 
    } 

} 

Answer 8

Có một giải pháp nếu phụ huynh có nổi. Đối với phần tử mà bạn đã áp dụng ngắt trang, làm cho phần tử tràn: ẩn. Đó là tất cả. Nó làm việc cho tôi.

<div style='float:left'> 

<p style='overflow:hidden;page-break-before:always;'></p> 

</div>