css - 打印预览压扁内容

原文 标签 css printing print-preview print-css

我试图让打印预览以我希望它在 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 英寸的边距,这意味着从逻辑上讲,每边我的边距应该减半。但是,如果我真的这样做了,它看起来会被压扁:

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 查询来解决这个问题?作为引用,我尝试在正文本身上设置边距,但顶部/底部边距不会在多个打印页面上持续存在。

最佳答案

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

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

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

关于css - 打印预览压扁内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37908062/

相关文章:

html - 使用 css 修复表格前 2 列的位置

javascript - 淡入图像,效果完成后,淡入图像

css - 用不寻常的字符模板化 css 伪命名空间,然后对正常字符进行后处理。有什么缺点/完全不允许的问题吗?

wpf - 如何从 Dispatcher 线程访问单独的线程生成的 WPF UI 元素?

javascript - 打印div的内容(除其中的某些元素外)不起作用

html - 样式化 mailchimp 表单

r - Windows 中的 PDF 拼合

c# - GetPrintJobInfoCollection() 异常有时

c# - Python 的打印 "0"*5 在 C# 中等效

java - 您从哪里获得用于打印预览的 zebra 打印机字体?