打印的网页看起来与实际页面有很大不同

Question

我正尝试设置在线邀请。发送邀请函的方式之一是打印。不幸的是，虽然我在网页上看到了我想要的邀请，但当我去印刷时，结果却完全不同。 Here is a sample set of invitations.邀请被放置在2x2网格上，文本以HTML格式覆盖，并从图像的顶部和左侧以特定百分比放置。当我去印刷的时候，有三件事情是不对的。按照奇怪的顺序：

1. 文字颜色是不同的。具体来说，无论CSS中指定了什么颜色，它总是黑色的。
2. 即使有一些JavaScript应该调整文本大小以适合图像，文本也会溢出图像。
3. 邀请不会出现在2x2网格上。

对CSS的一些注意事项：所有规则被@media all块内应用，并且有一个@page {size: landscape}块，使景观的页面打印，如建议here。 Bootstrap正在使用;如果需要，我可以放弃它。 HTML和body标签被设置为高度和100％。

Answer 1

如果您直接从浏览器打印，则可能需要打印样式表。 Web和CSS之间有很大的区别。

我发现下面的链接SmashingMagazine要解释的差异，开始使用样式表进行打印真正帮助：https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

我不认为你的自定义JavaScript调整文字大小将运行时你去打印，所以你可能也需要在你的打印样式表中进行修改。