css - How to get cross browser compatibility in Print on page from all browsers?

Question

How do you get cross browser compatibility in Print? any tips for print css file to make print on paper identical from all browser.

Edit

I'm already using Eric meyer CSS but still facing inconsistencies in different browser when we take print from site.

Is there any CSS declarations which we can use always and put at a top in print css , Like other css resets which work good in media=screen?

I'm already using a different css for print (print.css) with media="print"

---

Would it be better to keep * {posotion:static} , *{float:none} , * {clear:both} in print css always?

Answer 1

Identical results are impossible. The output depends not only on CSS but also on individual settings for page margins, the printer’s capabilities, available fonts, paper format (A4 vs US Letter) and probably a lot more.

For CSS

• Avoid floats and positioning (relative, absolute and fixed). Especially Mozilla (Firefox) can not handle those properties very well.
• Use page-break-* but don’t rely on it. Some browsers insert page breaks even in images.
• You don’t know the page width and height (could A5). Keep anything as flexible as possible.
• For performance, put your print style into the main stylesheet in a @media print {} rule.
• Use pt not px for borders and margins. A printer doesn’t know what a pixel is and may come to strange results.
• Develop your print layout in Opera, which has the best support for @media print currently, and insert compatibility hacks, when you’re done.
• Internet Explorer may crash on print, if you use its reserved IDs.
• Never rely on print preview. You get very different results on real printouts. Save the rain forest with a print-to-pdf-driver. :)