打印预览压缩内容

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;
    }
  }

即使我尝试手动设置边距，问题仍然存在，并且你甚至可以看到我的内容被挤压了。这是没有任何边距的样子（留下1英寸和0.5英寸的边距）：

这是我自己设置边距后的效果：

有没有办法可以防止浏览器进行这种压缩行为，或者使用我的@print查询来解决这个问题？值得注意的是，我已经尝试在body本身上设置边距，但顶部/底部边距不会在多个打印页面之间保持。

- Seiyria

---

所以你想让页面居中？ - user4520208

@ihemant360 你是什么意思？ - Seiyria

@ihemant360 为什么那样做会有任何作用呢？打印媒体隐藏了标题栏。 - Seiyria

@ihemant360，你提供的解决方案并不是通用的解决方案，在许多情况下（如果有的话）都不会起作用。不幸的是，你似乎没有理解问题的实质。我试图做的是使打印预览不会压缩我的内容，而向一个看似随机的元素添加硬编码偏移量并不能解决这个问题。这似乎是一个浏览器问题。 - Seiyria

我还没有使用过@page，但它需要在@media print内部吗？因为我认为它仅会在打印时有影响。"@page CSS at-rule用于在打印文档时修改一些CSS属性" https://developer.mozilla.org/en-US/docs/Web/CSS/@page - Carol McKay

Answer 1

幸运的是，这实际上是第一个媒体查询的问题：

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

因为它们都被设置为相同的大小，它们会互相推挤。解决方法就是将html的宽度/高度设置正确，然后一切都会自然而然地落入位。

- Seiyria