打印預覽壓縮內容

Question

我正在嘗試以我希望使用CSS中的@page指令的方式為我打印打印預覽。 由於某種原因，無論我的頁邊距設置為什么，內容都將被壓縮，即使這些數字據稱是准確的也是如此。 這是一個示例測試：

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

如果您在此頁面上打開打印預覽（我正在使用chrome測試），您會看到這些卡偏離中心。 不過，這就是問題-我的卡設置為2.5英寸乘3.5英寸，頁面本身設置為8.5英寸乘11英寸。 這意味着我在左右之間應留有大約1英寸的頁邊距，在頂部和底部之間應留有0.5英寸的頁邊距，這意味着從邏輯上講，我的每一頁邊距應減半。 但是，如果我確實這樣做了，它看起來會被壓縮：

這是我的@page CSS：

  @media print {
    html, body, .printable, .results-pane, .embed-view {
      width: 8.5in !important;
      height: 11in !important;
    }

    @page {
      size: 8.5in 11in;
      margin-top: 0.25in;
      margin-left: 0.5in;
      margin-right: 0.5in;
      margin-bottom: 0.25in;
    }
  }

即使我嘗試手動設置邊距，該問題仍然存在，並且您甚至可以看到我的內容被壓縮了。 這是絕對沒有邊距的外觀（保留1in和0.5in邊距可用：

這是我自己設置邊距時的外觀：

有沒有一種方法可以阻止瀏覽器執行這種壓縮行為，或者使用我的@print查詢來解決此問題？ 作為參考，我嘗試在主體本身上設置頁邊距，但是頂部/底部頁邊距不會在多個打印頁面上保持不變。

Answer 1

幸運的是，這實際上是第一個媒體查詢的問題：

html, body, .printable, .results-pane, .embed-view {
  width: 8.5in !important;
  height: 11in !important;
}

因為這些都設置為相同的大小，所以它們彼此推出。 解決方法是使html的寬度/高度正確，然后一切都從此處放下。