Which browsers support page break manipulation using CSS and the page-break-inside element?

Question

I'm trying to use the page-break-inside CSS directive, the class of which is to be attached to a div tag or a table tag (I think this may only work on block elements, in which case it would have to be the table).

I've tried all the tutorials that supposedly describe exactly how to do this, but nothing works. Is this an issue of browser support or has anyone actually gotten this working, the exact bit of CSS looks like this:

@media print {

  .noPageBreak {
     page-break-inside : avoid;
  }
}

Answer 1

Safari 1.3 and later (don't know about 4) do not support page-break-inside (try it, or see here: http://reference.sitepoint.com/css/page-break-inside). Neither do Firefox 3 or IE7 (don't know about 8).

In a practical sense, support for this attribute is SO spotty, it doesn't make sense to use it at all at this point. You'd be lucky if even 10% of your visitors have browsers that can support this.

The solution I used was to add

page-break-after:always

to certain divs, or add a "page-breaker" div in where you want breaks. This is quite ham-handed, I know, because it doesn't do quite what you want, and causes content to not reach the bottom of the printed page, but unfortunately there isn't a better solution (prove me wrong!).

Another approach is to create a stylesheet that removes all extraneous elements (display:none) and causes the main content to flow in one main column. Basically, turn it into a single column, text-only document.

Finally, avoid floats and columns when styling for printers, it can make IE (and FF) act wacky.

Answer 2

Safari 1.3+, Opera 9.2+, Konquerer, and IE8 all support it, at least to some degree.

Firefox apparently still does not.