打印的網頁看起來與實際頁面有很大不同

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調整文字大小將運行時你去打印，所以你可能也需要在你的打印樣式表中進行修改。