2015-03-25 7 views
7

Ho un problema con i CSS page-break-inside: avoid. Ho alcuni blocchi di stampa che hanno questo attributo css impostato, tuttavia Safari esegue il breaing di qualsiasi contenuto proprio mentre si verifica la vera interruzione di pagina, mentre funziona in tutti gli altri principali browser (versioni correnti) che ho provato finora.Safari page-break-inside: evitare di non funzionare

Non sembra importare quale tipo di contenuto contenga il blocco di stampa poiché ho visto questo comportamento sia con una tabella che con un elemento di tela diviso in mezzo.

Per quanto riguarda http://css-tricks.com/almanac/properties/p/page-break/ e http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html, dovrebbe funzionare. Non sono state trovate informazioni aggiuntive e recenti su questo argomento con una ricerca rapida.

Qualche suggerimento? Grazie.

BTW Sono su Windows 7 & Safari 5.1.7

risposta

9

Provate ad usare display: inline-block; invece di page-break-inside: avoid;. È inoltre possibile aggiungere vertical-align: top; e width: 100%; per far sì che gli elementi si comportino come normali elementi di blocco anziché elementi in linea.

Questa tecnica ha funzionato in modo affidabile da molto tempo prima che page-break-inside: avoid; fosse implementato nella maggior parte dei browser. È ancora il modo più affidabile e multipiattaforma per evitare interruzioni di pagina in un blocco di contenuti.

Se si desidera rendere un tavolo infrangibile, è possibile impostare display: inline-table; su di esso. O puoi semplicemente metterlo in un div inline-block.

+0

Grazie per questa soluzione :) – patman

-2

page-break-inside: evitare; ha una sintassi diversa per i diversi browser.

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

Questo dovrebbe funzionare per Safari

-webkit-column-break-inside: avoid; 

Per ulteriori informazioni vi preghiamo di verificare: https://css-tricks.com/almanac/properties/b/break-inside/

+0

Puoi dare maggiori informazioni sulla differenza tra i due e forse cosa fa ognuno di questi –