打印预览压缩内容

时间:2016-06-19 14:04:28

标签: css css3 printing print-preview print-css

我试图以我希望它在CSS中使用@page指令的方式为我打印打印预览。出于某种原因,无论我的页边距设置为什么,内容都会被压扁,即使数字被认为是精确的。这是一个测试的例子:

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

如果您在此页面上打开打印预览(我在Chrome中进行测试),您会发现这些卡片非常偏离中心。不过这是件事 - 我的卡片设置为2.5in乘3.5in,页面本身设置为8.5in乘11in。这意味着我应该在左右之间有大约1英寸的边距,在顶部和底部有0.5英寸的边距,这意味着我的边距应该在每一边减半。但是,如果我真的这样做,它看起来会被压扁:

enter image description here

这是我的@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英寸的边距:

enter image description here

以下是我自己设置边距时的样子:

enter image description here

有没有办法可以阻止浏览器执行这种压扁行为,或者使用我的@print查询来解决这个问题?作为参考,我尝试在主体上设置边距,但顶部/底部边距不会在多个打印页面上保留。

1 个答案:

答案 0 :(得分:0)

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

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

因为这些都被设置为相同的大小,所以它们互相推出。决议是让html正确的宽度/高度,所有的一切都从那里落到了位置。