CSS-Seitenumbruch funktioniert nicht in allen Browsern
Ich habe Probleme dabei, diese Arbeit in den meisten Browsern außer IE (es funktioniert sogar korrekt im IE6) und Opera.
Firefox trennt die divs korrekt, aber nur die erste Seite gedruckt.
Chrome und Safari gilt nur für die Seite Pause, um die Letzte div.
Wie kann ich dies funktioniert in allen Browsern richtig?
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>
Die divs mit den IDs #leftNav
und #mainBody
sind, eingestellt sind float:left
ein, so dass Sie die Anzeige gut.
Ich nur ausgeben wollen .pageBreak
Klassen, versteckt die #leftNav
und der rest der #mainBody
mit CSS.
CSS:
@media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
InformationsquelleAutor der Frage Richard Parnaby-King | 2011-02-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Übergeordnete Elemente können nicht schweben.
Einstellung
float:none
auf alle übergeordneten Elemente machtpage-break-before:always
richtig funktionieren.Andere Dinge, die brechen können page-break sind: mit Seitenumbruch innerhalb von Tabellen, floating elements, inline-block-Elemente block-Elemente mit Grenzen.
InformationsquelleAutor der Antwort Richard Parnaby-King
Zur Vervollständigung, und für den nutzen anderer, die das gleiche problem haben, ich möchte nur hinzufügen, dass ich auch hatte, um
overflow: visible
dem body-tag, um die für FireFox befolgen Sie die Seitenumbrüche und sogar zu drucken, die mehr als nur die erste Seite.InformationsquelleAutor der Antwort Vincent
Habe ich festgestellt, dass Twitter-Bootstrap-Klassen hinzufügen, ein paar Sachen auf der Seite, die machte es schwierig, Seite-Pausen arbeiten. Firefox hat auf Anhieb geklappt, aber ich habe zu Folgen, die verschiedenen Vorschläge zu get it to work in Chrom und, schließlich, IE (11).
Folgte ich den Anregungen hier und anderswo. Die einzige Eigenschaft, die ich "entdeckt", die ich noch nicht gesehen habe erwähnt ist "box-sizing". Bootstrap kann, setzen Sie diese Eigenschaft auf "box-sizing: border-box", die brach IE. Ein IE-freundliche Einstellung "box-sizing: content-box". Ich wurde geführt, um diese von der Einschränkung über die "block-Elemente mit Grenzen" von Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
Sieht es aus wie es ist ein bisschen ein Wettrüsten zu entdecken, die nächste Eigenschaft, die brechen könnte Seite-Pausen.
Dies ist die Einstellung, die für mich gearbeitet (Chrome, FF, IE 11). Im Grunde ist es versucht, Sie zu überschreiben, all die problematischen Einstellungen auf alle divs auf der gedruckten Seite. Natürlich, dies kann auch brechen Ihre Formatierung, und das würde bedeuten, dass du musst einen anderen Weg finden, die Seite.
InformationsquelleAutor der Antwort Yuri
"Firefox-Versionen bis einschließlich 3.5 nicht unterstützen, die vermeiden, Links oder rechts."
IE-Unterstützung ist auch teilweise
Sie können erreichen, was benötigt :page-break-before:always; unterstützt in allen Browsern
"aber nur die erste Seite drucken" : ich glaube nicht, dass es css zusammenhängen , ich vermute, dass es etw auf drucken-Fenster des Browsers 🙂
InformationsquelleAutor der Antwort sepehr
Dies ist zwar nicht prominent dokumentiert, es sollte angemerkt werden, dass die page-break-Eigenschaften nicht angewandt werden kann Tabelle Elemente. Wenn Sie alle Elemente, die eine
display: table;
oderdisplay:table-cell;
angewendet werden (Häufig in vielen Vorlagen unter die clearfix-Klasse), dann enthalten die Elemente ignorieren page-break-Regeln. Nur aufheben, die die Regel in Ihrem Druck-stylesheet, und Sie sollten ok sein (nachdem die Schwimmer wurden auch entfernt, natürlich!).Hier ist ein Beispiel, wie dies zu tun für den beliebten clearfix problem.
BEARBEITEN:
Ich vergaß hinzuzufügen, dass der andere Ort, den ich in ist dies, wenn die Vorlage erklärt, die gesamte Seite (gewöhnlich als Haupt-oder main-wrapper) mit
display:inline-block;
Wenn sich der Abschnitt innerhalb eines inline-block, es wird nicht funktionieren, also halten Sie Ihre Augen offen für diejenigen, die als gut. Ändern oder überschreiben
display:inline-block;
mitdisplay:block
funktionieren sollte.Hoffe, das hilft!
~techdude
InformationsquelleAutor der Antwort techdude
Hatte ich eine
position: absolute;
im div-Druck, verursacht dies nicht zu funktionieren.InformationsquelleAutor der Antwort ade jones
Gibt es eine Lösung, wenn die Eltern schweben . Für das element, auf das Sie angewendet Seitenumbruch, stellen Sie das element mit overflow:hidden. Das ist alles. Es funktionierte für mich.
InformationsquelleAutor der Antwort Sarath Mohan
was ist dein code?
wie das?:
InformationsquelleAutor der Antwort Mohammad Ali Akbari