Safari page-break-inside: vermeiden Sie die Arbeit

Question

Ich habe ein Problem mit CSS page-break-inside: avoid. Ich habe einige Druck-Blöcke, die dieses css-Attribut gesetzt haben, aber Safari breas irgendeinen Inhalt genauso wie der wirkliche Seiten-Bruch auftritt, während es in allen anderen Haupt-Browsern (aktuellen Versionen) funktioniert, die ich bisher getestet habe.

Es scheint nicht wichtig zu sein, welche Art von Inhalt der Druckblock enthält, da ich dieses Verhalten sowohl bei einer Tabelle als auch bei einem Canvas-Element gesehen habe, das genau in der Mitte aufgeteilt wird.

Soweit es betrifft http://css-tricks.com/almanac/properties/p/page-break/ und http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html sollte es funktionieren. Konnte keine zusätzlichen und aktuellen Informationen zu diesem Thema mit einer schnellen Suche finden.

Irgendwelche Vorschläge? Vielen Dank.

BTW ich bin auf Windows 7 & Safari 5.1.7

Answer 1

Versuchen display: inline-block; statt page-break-inside: avoid; verwenden. Sie können auch vertical-align: top; und width: 100%; hinzufügen, damit sich die Elemente wie normale Blockelemente anstelle von Inline-Elementen verhalten.

Diese Technik arbeitet zuverlässig seit langem, bevor page-break-inside: avoid; in den meisten Browsern implementiert wurde. Es ist immer noch der zuverlässigste plattformübergreifende Weg, um Seitenumbrüche in einem Inhaltsblock zu verhindern. Wenn Sie eine Tabelle unzerbrechlich machen möchten, können Sie display: inline-table; darauf setzen. Oder Sie können es einfach in einen Inline-Block div einfügen.

Answer 2

Seitenumbruch: vermeiden; hat eine andere Syntax für verschiedene Browser.

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ 
page-break-inside: avoid; /* Firefox */ 
break-inside: avoid; /* IE 10+ */ 

Dies sollte für Safari arbeiten

-webkit-column-break-inside: avoid; 

Weitere Informationen pls überprüfen: https://css-tricks.com/almanac/properties/b/break-inside/