8

我正在尝试让打印预览以我希望它使用 CSS 中的 @page 指令的方式为我打印。出于某种原因，无论我的页边距设置为多少，内容都会被挤压，即使数字应该是准确的。这是一个测试示例：

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

如果您在此页面上打开打印预览（我正在使用 chrome 进行测试），您会看到卡片非常偏离中心。不过，事情是这样的——我的卡片设置为 2.5 英寸 x 3.5 英寸，而页面本身设置为 8.5 英寸 x 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 查询来解决这个问题？作为参考，我尝试在正文本身上设置边距，但顶部/底部边距不会在多个打印页面上持续存在。

4

1 回答 1

0

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

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

因为这些都被设置为相同的大小，所以它们相互推出。解决方案是制作html正确的宽度/高度，然后一切都从那里落入到位。

于 2017-01-24T19:48:05.437 回答