@page: first {margin: ...} im Chrome-Fehler?
Bezug nehmend auf die volle Geige bei: Ссылка
%Vor%Ich erwarte von der obigen Regel, dass die erste gedruckte Seite bestimmte Ränder hat und alle anderen Seiten 1 Zoll Ränder haben.
Stattdessen erhalte ich in der Druckvorschau von Chrome Folgendes (genau auf die gedruckte Ausgabe). Die Ränder sind auf den nicht ersten Seiten unterschiedlich, aber sie sind nicht korrekt. Durch das Auskommentieren der :first margin -Regel können die nicht ersten Seiten mit dem richtigen Layout gedruckt werden, aber natürlich ist auch die erste Seite betroffen.
Mozillas Dokumentation scheint mir zu behaupten, dass Chrome dies richtig unterstützt. Und klar reagiert Chrome, aber nicht richtig. Ich würde auf die Chrome-Dokumentation verweisen, wenn ich könnte, aber Google saugt an Dokumentation! (Gibt es ein Google-Äquivalent des MDN ? Ich kann es nicht finden.)
Es ist seltsam für mich, dass ich dieses Problem anderswo nicht finden kann, wenn Chrome dies seit Version 2.0 unterstützt hätte und dass Drucklayouts so ein riesiges PITA sind.
Tue ich es falsch? Gibt es einen robusten Workaround? Ich habe @page:first (kein Leerzeichen) ausprobiert, Randwerte unabhängig trbl style und individuell eingestellt und die Reihenfolge der Regeln in den Style-Deklarationen getauscht. Keine Wirkung.
2 Antworten
Sie haben gesagt:
Mozillas Dokumentation scheint mir zu behaupten, dass Chrome dies unterstützt richtig.
Das stimmt, aber die :first CSS-Pseudoklasse von Chrome unbekannte Unterstützung zeigt ("Unbekannter Support. Bitte aktualisieren Sie dies."
auch gibt es viele Druckvorschau Probleme mit Chrome und ich auf einige gestolpert, die für dieses Problem ähnlich klang wie diese . Trotzdem konnte ich keine Arbeit finden. Nur damit Sie sich bei Ihren eigenen Tests bewusst sind, habe ich versucht:
- negative Ränder
- Padding statt Ränder
- große Ränder, um Ränder zu simulieren
- erzwungene Seitenumbrüche (mögliche Hack-Lösung)
- explizit
widthundheight -
!important
Ich habe viele Tests durchgeführt und Chrome scheint die CSS-Regeln beim Erstellen der PDF-Vorschaudatei zu ignorieren oder nicht ordnungsgemäß zu implementieren . Persönlich denke ich, dass dies ein Fehler ist.
Aktualisieren
- Firefox v17.0.1 - Gilt nicht
@pageRegeln überhaupt. - Chrome 23.0.1271.97 m - wendet fälschlicherweise die Pseudo-Klasse
:firstauf allen Seiten an. - IE 9.0.8112.16421 - führt die gleiche falsche Anwendung von Regeln wie Chrome durch
Meine Ergebnisse decken sich mit der Browser Kompatibilitätstabelle auf der :first Pseudo-Klasse . Das heißt, eine unbekannte Kompatibilität für Chrome und eine "nicht unterstützte" Kompatibilität für Firefox. Ich konnte IE8 nicht testen, aber mein Test mit IE9 unterstützt die Behauptung des Diagramms nicht. Auch Microsofts Beispiele richtig zu machen, scheitern ( CSS How-to: Optimieren Seiten für den Druck verwenden CSS ).
Nach weiteren Tests kann ich nur feststellen, dass @page nicht vollständig in die meisten Browser integriert wurde. Die Spezifikationen sind vorhanden ( es gibt neue Spezifikationen für CSS3 ), aber basierend auf unseren Tests wurde das Fehlen von getestet Beispiele in Artikeln und die Fehlerberichte sehen so aus, als könnten Sie die flexibleren Spezifikationen des @page Stylings nicht erfolgreich verwenden.
Lösung, die in meinem Fall funktioniert hat und alle Ränder über alle Seiten ähnlich gemacht hat. Vorher verwendete die erste Seite einen größeren Rand. Anstatt margin-top zu verwenden: 20px benutze padding-top: 20px in dem Block, der zuerst in page div geht. Dies kann sein
funktioniert:
%Vor%funktioniert nicht (gibt einen größeren oberen Rand auf der ersten Seite):
%Vor%Tags und Links css printing google-chrome