Html 打印的网页看起来与实际页面非常不同

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

文本颜色不同。具体地说，不管CSS中指定了什么颜色，它总是黑色的

文本溢出图像，即使有一些JavaScript应该调整文本大小以适应图像

邀请不会显示在2x2网格上

---

关于CSS的一些注意事项：所有规则都应用于

@media all

块中，并且有一个

@page{size:landscape}

块使页面按建议在横向中打印。正在使用引导程序；如果需要的话，我可以不用它。HTML和body是标记，设置为高度并带有100%。

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

我发现以下SmashingMagazine链接在解释差异和开始打印样式表方面非常有用：

---

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

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

我发现以下SmashingMagazine链接在解释差异和开始打印样式表方面非常有用：

---

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

您需要使用@media print{}，并添加一大堆CSS以使其看起来相同。您需要使用@media print{}并添加一大堆CSS以使其看起来相同。