CSS-Spalten brechen beim Drucken

Lesezeit: 2 Minuten
.class {    -webkit-column-count: 4;
    -webkit-column-gap: 0.25in;
    -webkit-column-rule-width : 1px;
    -webkit-column-rule-style : solid;
    -webkit-column-rule-color : #eee;
}

Es funktioniert also perfekt in Safari, aber beim Drucken werden die 4 Spalten zu einer einzigen Spalte, die sich über mehrere Seiten erstreckt. Irgendwelche Ideen?

  • Das ist sehr frustrierend. Ich arbeite jetzt seit ein paar Stunden an einer Lösung und es sieht so aus, als müsste ich einen ganz anderen Weg einschlagen. Bei der WebKit-Implementierung (einschließlich des neuesten Builds, den ich gerade überprüft habe, Chrome und wkhtmltopdf) sind CSS3-Spalten deaktiviert (siehe Peters Antwort). Firefox rendert sie tatsächlich korrekt, aber ich habe keine Ahnung, wie ich programmgesteuert effizient darauf zugreifen kann 🙁 Schlechte Zeiten.

    – Hut8

    6. Oktober 2013 um 11:58 Uhr

  • Verwandter Chromium-Bug: code.google.com/p/chromium/issues/detail?id=99358

    – Damien

    3. November 2014 um 16:57 Uhr

Es scheint, als hätte der Entwickler von Spalten im Webkit (Dave Hyatt) Spalten beim Drucken deaktiviert, weil er den Seitenumbruch nicht richtig implementieren konnte: https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854

Ich bin überrascht, dass in mehr als 5 Jahren keine Lösung gefunden wurde …

  • Das ist sehr interessant, weil ich auf ein ähnliches Problem gestoßen bin, das ich am Ende als benutzerdefinierte Lösung implementieren muss. Es ist ziemlich ärgerlich, dass es noch keine Lösung gibt.

    – Nick Felker

    12. November 2013 um 4:12 Uhr

  • In der Konversation scheinen die Entwickler darauf hinzuweisen, dass das Problem behoben ist, aber ich sehe das Problem immer noch.

    – Joel

    8. März 2016 um 21:42 Uhr

  • Dieser Fehler wurde kürzlich in Chome behoben – bugs.chromium.org/p/chromium/issues/detail?id=99358

    – Māris Kiseļovs

    30. Dezember 2016 um 6:28 Uhr

  • Dies ist in Chrome behoben, nicht in Safari.

    – dokman

    16. April 2018 um 9:38 Uhr

  • Es ist in Safari behoben, aber als ich versuchte, auf iOS WKWebView zu drucken, werden die Fehler erneut angezeigt

    – Alan Donizete

    25. Mai 2020 um 18:12 Uhr

Es ist erwähnenswert, dass diese in Firefox 31.0 unter OSX korrekt mit dem folgenden Stil gedruckt werden. In WebKit (Safari/Chrome) ist es jedoch immer noch defekt.

.column_wrapper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Es funktioniert nicht in Chrome, Firefox. Sie haben nur eine vorübergehende Lösung. Verwenden Sie IE für mehrspaltigen Druck

  • Funktioniert wie ein Zauber in Firefox.

    – Alejandro Salamanca Mazuelo

    7. Mai 2016 um 22:39 Uhr

Die einzige Möglichkeit, in Spalten zu drucken, besteht darin, mit FireFox oder IE zu drucken … und die Versionen ohne Browserpräfix zu verwenden, damit FF und IE die Spalten-CSS lesen können

der Druck und die Webseite sind 2 verschiedene Dinge. Versuchen Sie also, diff CSS für Druckseiten zu verwenden und zu sehen

Seitenumbruch-CSS-Eigenschaften. es wird sich als nützlich erweisen


  • es wäre sehr nett, wenn du post und beispiel hättest!

    – mandza

    18. August 2014 um 12:48 Uhr

  • es wäre sehr nett, wenn du post und beispiel hättest!

    – mandza

    18. August 2014 um 12:48 Uhr

1430160cookie-checkCSS-Spalten brechen beim Drucken

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy