首页 > web前端 > css教程 > 如何在CSS中正确设置Chrome打印的A4纸张尺寸?

如何在CSS中正确设置Chrome打印的A4纸张尺寸?

DDD
发布: 2024-12-12 21:16:12
原创
325 人浏览过

How to Correctly Set A4 Paper Size in CSS for Chrome Printing?

CSS 设置 A4 纸张尺寸

问题:

用户在从网络打印 A4 纸张模拟时遇到困难Chrome 中的页面,内容被剪裁。即使单元尺寸设置为 21cm x 29.7cm,问题仍然存在。

调查:

经过进一步分析,根本原因是分配了初始值打印介质规则中的页面宽度。

宽度的影响:初始:

  • 在 Chrome 中,如果父元素上没有为宽度提供特定长度,则打印媒体规则下的 .page 元素内的 width: 初始会导致页面内容缩放。
  • 这会导致:

    • 内容对于页面来说太长大约2cm
    • 页面填充超过初始 2cm
    • 在缩放至 210mm 之前以大约 196mm 渲染内容

解决方案:

要解决此问题,在打印介质规则中明确将 A4 纸张宽度和高度设置为 html、body 或 .page,避免使用初始关键字。

修订代码:

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... other print rules ... */
}
登录后复制

注意:此修改保留了原始 CSS 设置,同时解决了 Chrome 中的缩放问题。

以上是如何在CSS中正确设置Chrome打印的A4纸张尺寸?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板