打印网页与实际页面

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和正文标签设置为高度和100％。

Answer 1

如果您只是直接从浏览器打印，则可能需要打印样式表。 Web的CSS和打印的CSS之间存在很大差异。

我发现以下SmashingMagazine链接非常有助于解释差异并开始使用样式表进行打印：https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

我不认为用于调整文字大小的自定义javascript会在您打印时运行，因此您可能还需要在打印样式表中进行修改。