Firefox druckt nur die erste Seite und schneidet die Seite auf der rechten Seite

Question

Ich hatte große Probleme mit dem Drucken von Firefox (jede Version, meine ist 16.0.2, aber sogar Aurora Dev Builds taten das gleiche). Beim Drucken der Seite funktioniert Shrink zum Anpassen in die Druckvorschau nicht. Nur so, wie Sie die Seite auf das Papier anpassen, wählen Sie Zoom 70% im selben Dialog. Anderes Problem: druckt nur erste Seite. Was tun?

Answer 1

Ich musste die CSS-Datei zum Drucken anpassen, also habe ich einen gemacht. Es funktioniert überall einwandfrei, aber nicht in Firefox. Was war das Problem?

Zuerst habe ich versucht, Breite und Höhe für BODY und HTML in der print.css-Datei anzugeben. Als Margen etc.

Später habe ich herausgefunden, was das Problem war: Standard CSS-Datei in das folgende war:

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

Also habe ich hinzugefügt habe folgendes in die print.css Datei:

sichtbar in der print.css Datei:

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

ich denke, wenn Sie Überlauf in der CSS angegeben hatten, nicht & -y -x, würden Sie nur Überlauf angeben.

Drucken von Firefox funktioniert jetzt wie es sollte. Ich dachte nur, dass dies jemandem helfen könnte, der merkwürdiges Druckverhalten in Firefox hat.

Answer 2

Zusätzlich zu der Antwort der Kokesh, einige Male Attribute

display: table 

auch dieses Problem erzeugt. Sie müssen es also ändern, um es zu blockieren oder ein anderes, das zu Ihren Anforderungen passt.

Answer 3

Ich habe versucht, die Fixes in anderen Antworten vorgeschlagen, aber sie haben das Problem für mich nicht gelöst. Nach einer Menge von Forschung und Versuch & Fehler, habe ich this article durch eine Liste auseinander gefunden. Ich war skeptisch, weil es so alt ist, aber es heißt:

Wenn ein Floats läuft vorbei an der Unterseite einer gedruckten Seite, der Rest des Schwimmers effektiv verschwinden, da es nicht auf dem nächsten gedruckt wird Seite.

Da ich einen großen schwebenden Behälter habe, dachte ich, ich würde es versuchen. So habe ich eine Mischung aus den anderen Antworten und diesen Artikel und kam mit dieser:

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; 
} 

Also im Grunde:

1. Einstellung Körper overflow: visible
2. Rahmen Elemente, die als Wrapper verhalten display: block , beseitigen Sie alle flex Arten und setzen Sie Höhe zurück, wenn notwendig
3. Eliminieren Sie float auf langen Behältern

Dieser Mix hat für mich funktioniert! Ich bin so glücklich, ich dachte, ich würde teilen :)