css – 打印预览压缩内容

栏目: CSS · 发布时间: 5年前

内容简介:翻译自:https://stackoverflow.com/questions/37908062/print-preview-squishing-content

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

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

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

css – 打印预览压缩内容

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

css – 打印预览压缩内容

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

css – 打印预览压缩内容

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

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

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

因为这些都被设置为相同的大小,他们互相推出.决议是让html正确的宽度/高度,所有sorta从那里落地.

翻译自:https://stackoverflow.com/questions/37908062/print-preview-squishing-content


以上所述就是小编给大家介绍的《css – 打印预览压缩内容》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

金融计算与建模

金融计算与建模

朱世武 / 清华大学 / 2007-8 / 40.00元

《金融计算与建模:理论、算法与SAS程序》全书分为4大模块:1-9章为金融学基础指标计算模块;10-12章为股票定价模块;13-18章为风险度量模块;19-23章为固定收益定价模块。每一模块的内容一般由三部分组成:金融理论与模型、算法实现及计算程序。其中,算法实现与计算程序全部以中国金融市场的实际问题为应用背景而设计。《金融计算与建模:理论、算法与SAS程序》不仅展现了应用SAS软件的技术,同时也......一起来看看 《金融计算与建模》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

MD5 加密
MD5 加密

MD5 加密工具