打印预览压缩内容

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的宽度/高度正确，然后一切都从此处放下。