如何使用 CSS 修复 Chrome 中 A4 打印剪切问题？

CSS 设置 A4 纸张尺寸以进行精确打印

问题：

将 HTML 元素尺寸设置为 A4 尺寸（21 厘米） x 29.7cm) 会导致在 Chrome 中打印时出现页面剪裁，尽管在浏览器中显示正确window.

分析：

Chrome 在打印媒体规则中将“initial”分配给页面宽度时似乎存在问题。这会导致内容缩放到比定义的 A4 尺寸稍大的尺寸，从而导致剪裁。

解决方案：

要解决此问题，请避免使用 'initial ' 用于打印介质规则中的页面宽度。相反，将 A4 尺寸显式分配给 HTML、正文或直接分配给“.page”元素。

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
}

通过设置固定尺寸，内容保留在 A4 边界内，防止剪切。这解决了 Chrome 中的问题，同时保留了其余的 CSS 样式。

注意： 此修改解决了 Chrome 处理页面宽度“初始”的特定问题。但是，跨不同浏览器测试打印功能非常重要，以确保打印输出的一致性和准确性。

以上是如何使用 CSS 修复 Chrome 中 A4 打印剪切问题？的详细内容。更多信息请关注PHP中文网其他相关文章！