Firefox chỉ in trang 1

Question

Tôi đang làm việc trên css in thân thiện cho một trang web. Nó xem trước/in hoàn hảo trong IE, nhưng Firefox (phiên bản 3.6) chỉ xem trước/in trang thứ nhất.

Có ai biết bất cứ điều gì thường gây ra điều này không? Đánh dấu khá phức tạp, vì vậy tôi không chắc bắt đầu từ đâu!

Cảm ơn.

Sửa

Giải pháp này chỉ làm cho mọi việc tồi tệ hơn.

https://support.mozilla.com/ga-IE/questions/667285#answer-115916

Hình như in ấn chỉ sucks trong FF. Khách hàng sẽ không muốn nghe điều đó - hy vọng họ không sử dụng FF!

Answer 1

Các long-standing bug with printing absolutely-positioned elements đã được cố định trong Firefox 3.

Những vấn đề với trang thiếu được theo dõi trong bug 521204 (xem xét thông qua các "phụ thuộc vào" danh sách). Bạn có khung hoặc bảng dài trên trang bạn đang cố gắng in không?

Và vâng, in ấn trong Firefox dưới nước, xin lỗi bạn phải đối phó với nó ...

Answer 2

Nếu bạn không thể khắc phục được những hạn chế của Firefox về in, bạn có thể chuyển đổi trang để một PDF. Nếu bạn đang sử dụng tùy chọn đó, Prince XML là thư viện tôi muốn giới thiệu. Nó có hỗ trợ CSS rất tốt bao gồm cả phương tiện in.

Answer 3

Firefox chắc chắn KHÔNG hút bất kỳ sự tôn trọng nào. Tuy nhiên, đôi khi nó tuân thủ nghiêm ngặt hơn các tiêu chuẩn so với các trình duyệt khác. Dù sao, để cắt theo đuổi, tôi có cùng một vấn đề, tức là firefox đã in (cũng đang xem trước) chỉ 2 trang đầu tiên của báo cáo nhiều trang, được tạo bằng một bảng dài, được tạo bởi trang web của tôi. Sau khi gỡ lỗi, tôi phát hiện ra rằng tôi đã đưa vào hầu hết nội dung của báo cáo bên trong một phần tử span với một kiểu {display: inline-block;} trong số những thứ khác. Ngay sau khi tôi lấy ra rằng pagination là hoàn hảo ...

Answer 4

Tôi chỉ phát hiện ra, mà từ một phần tử với

display:inline-block; 

chỉ trang đầu tiên được in và everthing khác là ẩn. đặt cài đặt này thành

display:block; 

là giải pháp trong trường hợp của tôi.

Answer 5

Tôi gặp sự cố tương tự. Hóa ra, thẻ gốc có display: flex trên đó. Sau khi thay đổi điều này thành display: block, phần còn lại của nội dung được hiển thị. Tôi khuyên bạn nên đi lên cây DOM của bạn và kiểm tra mọi thuộc tính display.

Answer 6

Nếu bạn không muốn đi qua tất cả các mã của bạn, đây là điều duy nhất tôi đã phát hiện ra rằng việc cho tôi mà không rối tung lên tất cả các CSS khác của tôi:

@media print { 
    body { 
    overflow: visible !important; 
    } 
} 

Answer 7

Tôi đã thử một chục sửa chữa cho điều này và, cuối cùng, tất cả tôi cần là:

@media print { 
    body { 
    display: block; 
    } 
} 

Answer 8

tôi đã cùng một vấn đề vì height của body được thiết lập để 100%, sau khi tôi thay đổi để height: auto trong print.css của tôi, nó làm việc.

@media print { 
    body { 
    height: auto; 
    } 
} 

Answer 9

Sau rất nhiều nghiên cứu và thử nghiệm & lỗi, tôi đã tìm thấy this article bởi danh mục A ngoài. Tôi đã hoài nghi vì nó quá cũ nhưng nó nói rằng:

Nếu phần tử trôi nổi chạy qua cuối trang in, phần còn lại của phao sẽ biến mất hiệu quả vì nó sẽ không được in trên trang.

Vì tôi có một thùng chứa nổi lớn, tôi nghĩ tôi sẽ thử. Vì vậy, tôi đã thực hiện một sự pha trộn từ câu trả lời khác và bài viết này và đến với điều này:

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
} 

/*this is because I use angular and have this particular layout*/ 
body > .fade-ng-cloak { 
    height: 100%; 
    display: block; 
    flex: none; 
    float: none; 
} 
.l-content, 
.l-sidebar { 
    float: none; 
} 

Vì vậy, về cơ bản:

1. Thiết cơ thể để overflow: visible
2. yếu tố Setting mà cư xử như giấy gói để display: block, loại bỏ tất cả các kiểu flex và đặt lại chiều cao nếu cần
3. Loại bỏ float trên các thùng chứa dài

Hỗn hợp đó phù hợp với tôi! Tôi rất vui vì tôi nghĩ mình sẽ chia sẻ :)

Answer 10

Tôi đã gặp vấn đề tương tự và tôi đã thay thế vị trí từ position:relative thành position: absolute bằng height: 100% từ div trên xuống dưới cùng.