Firefox chỉ in trang đầu tiên và cắt trang ở bên phải

Question

Tôi gặp sự cố lớn khi in từ Firefox (mọi phiên bản, của tôi là 16.0.2, nhưng thậm chí cả các bản build của Aurora cũng tương tự). Khi in trang, Thu nhỏ để vừa trong bản xem trước Bản in không hoạt động. Cách duy nhất, làm thế nào để vừa với trang trên giấy là chọn Zoom 70% trong cùng một hộp thoại. Vấn đề khác: nó chỉ in trang đầu tiên. Việc cần làm?

Answer 1

Tôi cần điều chỉnh tệp CSS để in, vì vậy tôi đã thực hiện một. Nó hoạt động hoàn hảo ở mọi nơi, nhưng không hoạt động trong Firefox. Có vấn đề gì thế?

Trước tiên, tôi đã thử chỉ định Chiều rộng và chiều cao cho BODY và ​​HTML trong tệp print.css. Hơn lợi nhuận vv

Sau đó tôi phát hiện ra vấn đề là gì: file CSS tiêu chuẩn đã điều sau đây trong nó:

body { 
... 
overflow-x: hidden; 
overflow-y: scroll; 
} 

Vì vậy, tôi đã thêm đoạn mã sau vào file print.css:

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

Tôi đoán, nếu bạn chỉ có quy định tràn trong CSS, not -x & -y, bạn sẽ cần chỉ định tràn: hiển thị trong tệp print.css.

In từ Firefox hoạt động ngay bây giờ. Tôi chỉ nghĩ rằng điều này có thể giúp ai đó, người có hành vi in ​​lạ xảy ra trong Firefox.

Answer 2

Ngoài câu trả lời của Kokesh, một số lần thuộc tính

display: table 

tạo ra vấn đề này quá. Vì vậy, bạn cần thay đổi nó thành 'chặn' hay cách khác phù hợp với yêu cầu của bạn.

Answer 3

Tôi đã thử các bản sửa lỗi được đề xuất trong các câu trả lời khác nhưng chúng không giải quyết được sự cố cho tôi. 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 Một danh sách 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ác 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ẻ :)