首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >打印预览压缩内容

打印预览压缩内容
EN

Stack Overflow用户
提问于 2016-06-19 14:04:28
回答 1查看 1.7K关注 0票数 8

我试图让打印预览为我打印的方式,我希望它使用@page指令在CSS。由于某种原因,无论我的页边距设置为什么,内容都会被压缩,即使这些数字应该是准确的。下面是一个需要测试的示例:

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

如果你打开这个页面上的打印预览(我正在用铬进行测试),你会发现卡的中心离中心很远。不过,事情是这样的--我的卡片被设置为2.5英寸乘3.5英寸,页面本身被设置为8.5英寸乘11英寸。这意味着我应该在左右之间有大约1英寸的边距,在顶部和底部有0.5英寸的边距,这意味着我的边距在逻辑上应该减半。然而,如果我真的这么做,它看起来就压扁了:

这是我的@page CSS:

代码语言:javascript
运行
复制
  @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查询来修复这个问题?作为参考,我已经尝试设置身体本身的边距,但顶部/底部边距不会在多个打印页面上持续存在。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-24 19:48:05

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

代码语言:javascript
运行
复制
html, body, .printable, .results-pane, .embed-view {
  width: 8.5in !important;
  height: 11in !important;
}

因为它们都被设置成相同的大小,所以它们互相推开。决议就是让html达到正确的宽度/高度,然后一切都从那里开始。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37908062

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档