0

I am trying to create a document that prints at the same size in different browsers, but I am not having any luck.

Google Chrome 66 Chrome66

Firefox 60 Firefox60

Internet Explorer 11 IE11

(Microsoft Edge does not print background colors, so I am purposefully ignoring it.)

Why are they all different, and can I fix this? (Using CSS preferably.)

I'm guessing I will need to use @media print somehow, but I'm not real familiar with it.

Thanks.

posfan12
  • 2,541
  • 8
  • 35
  • 57
  • May I ask if you already apply a reset CSS to this page of your? – Toan Lu May 28 '18 at 03:46
  • I don't know what a reset CSS is, sorry. – posfan12 May 28 '18 at 03:48
  • 1
    It's a css file to include in your web page to set the styles of all elements to a consistent one between all browsers. In the other way, we can say that it override browsers styles. May you give it a try to include this reset css file first top of your web page? I usually use normalize.css https://necolas.github.io/normalize.css/ – Toan Lu May 28 '18 at 03:51
  • That is interesting, but the effect is very very minor in this case. – posfan12 May 28 '18 at 04:01
  • 1
    If things do not get prettier, you should consider using @media & @page. The usage is like an `if` statement (at least that is one way to understand it) and the CSS code inside that `@media print { .... }` will be affected if you enter print mode. You can refer to this example (https://github.com/randalmaia/print-css-reset/blob/master/print.css) – Toan Lu May 28 '18 at 04:01
  • @Sandeep suggested this as well, but the example he gave is not handled in the same way by the different browsers. – posfan12 May 28 '18 at 04:03
  • 1
    in that case, I think you can write a small reset CSS yourselves on elements that got different styles & then using prefix of the browser to target the right one. – Toan Lu May 28 '18 at 04:08
  • Could you describe what a prefix is? – posfan12 May 28 '18 at 07:52
  • 1
    Actually it's called `vendor prefix`. I missed the `vendor` part. https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix – Toan Lu May 28 '18 at 09:00

1 Answers1

-3

Please go through this query-solving reply. 

https://stackoverflow.com/a/25248089/9628414
Sandeep
  • 145
  • 2
  • 7
  • I've tried this, but the results are different in different browsers. Chrome adds its own margins to the ones specified in CSS. IE11 seems to ignore them completely. – posfan12 May 28 '18 at 03:43
  • Also, the answer you linked to is for Google Chrome only. – posfan12 May 28 '18 at 03:47