CSS控制打印方向，@page实现横向设置

CSS 中唯一能真正控制打印纸张方向的机制是 `@page { size: landscape }`，但它必须嵌套在 `@media print` 块内才生效，且仅影响实际出纸方向——不会自动适配内容布局；许多开发者误以为设了 `@page` 就万事大吉，结果遭遇仍纵向打印、内容截断或错位等问题，根源往往在于浏览器打印对话框的手动设置覆盖、企业策略限制、多 `@page` 规则冲突，或忽视了横向模式下需同步调整容器宽度、表格换行、绝对定位等样式；掌握 `size` 的正确写法（如优先用 `landscape` 而非非标准 `orientation`）、兼容性差异（Chrome/Edge 稳定支持，Firefox 91+ 起可靠）及内容协同重排逻辑，才是实现精准横向打印的关键。

如何用 @page 设置横向打印

浏览器默认纵向打印，@page 是唯一能直接控制纸张方向的 CSS 机制，但只在打印媒体中生效，且部分属性受浏览器和打印机驱动限制。

• @page 必须写在 @media print 块内或独立的打印样式表中，单独写在普通样式里无效
• 设置横向要同时指定 size: landscape，仅靠 transform 或 writing-mode 不会改变实际出纸方向
• Chrome 和 Edge 支持较好；Firefox 对 @page { size: landscape } 的支持从 v91+ 稳定，旧版可能忽略

@media print {
  @page {
    size: landscape;
  }
}

@page size 属性的写法差异

size 不是简单的布尔开关，它接受多种格式，不同写法行为不同，容易误以为“设了就横”。

• size: landscape：依赖浏览器将当前纸张（如 A4）旋转，最常用也最可靠
• size: 297mm 210mm：显式交换宽高，等价于 landscape，但需单位精确，无空格容错
• size: A4 landscape：合法，但部分旧版 Safari 会忽略 landscape 关键字，只认尺寸顺序
• 不能写成 size: rotate 或 orientation: landscape —— 后者不是标准属性，会被忽略

为什么加了 @page 还是纵向打印

常见不是代码写错，而是被更高优先级的用户设置或系统策略覆盖。

• 用户在浏览器打印对话框中手动选了“纵向”，会强制覆盖 @page 声明
• 某些企业环境通过组策略禁用了网页对 @page 的控制权（尤其 Windows + Chrome 管理版）
• CSS 中存在多个 @page 规则且命名冲突（如 @page :first 和匿名 @page），导致规则未命中
• 目标元素本身设置了 page-break-inside: avoid，但容器高度超出单页，触发分页后 @page 行为异常

横向打印时内容被截断或错位

@page { size: landscape } 只改纸张方向，不自动调整内容布局，这是最容易被忽略的一点。

• 原本按纵向设计的容器（如 width: 100%）在横向下可能超出纸张宽度，被裁剪 —— 需配合 @media print 重设 max-width 或 width
• 表格、Flex 容器等在横向下可能换行异常，建议加 white-space: nowrap 或 overflow-x: visible
• 绝对定位元素基于视口而非页面物理尺寸，横向后坐标可能偏移，应避免依赖 top/left 绝对值

真正起作用的是 @page 和内容样式协同，不是单靠一个规则就能“全自动横打”。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。