Safari 的 @page css 规则替代方案答案

【问题标题】：@page css rule alternative for safariSafari 的 @page css 规则替代方案
【发布时间】：2023-03-17 01:58:01
【问题描述】：

如何在 safari 中为这些规则使用写替代方案？我正在使用angularPrint 指令向我的某些页面添加打印功能，这会在我的文档中添加一些帮助程序classes，并且还使用@page 指令，在除safari 之外的所有浏览器中一切正常，我发现这些safari 不支持规则，所以我正在寻找这些规则的替代方法。有什么建议吗？

 @page {
    margin: 0cm;
    /*size: A4 landscape;*/
  }

  @page :first {
    margin-top: 0cm;
  }

  @page :left {
    margin-left: 0cm;
    margin-right: 0cm;
  }

  @page :right {
    margin-left: 0cm;
    margin-right: 0cm;
  }

【问题讨论】：

请提供示例链接进行检查。
@Sharvan developer.mozilla.org/en-US/docs/Web/CSS/%40page 说不支持 safari。
用@media print 试过了吗？
这可能与以下内容重复：stackoverflow.com/questions/13154147/… 我已多次遇到此 Safari 限制。截至 2019 年，在浏览器中获得一致打印的唯一方法似乎仍然是在服务器上进行。 :(
我记得我们处理这样的场景是从头开始编写一个完整的 css 并通过 JavaScript 动态打开一个新的 html 文件..

标签： html css printing safari media-queries

【解决方案1】：

尝试使用下面。

@page {
    margin: 2in;    /* default for all pages */
}
@page :left {
    margin: 1in;    /* margin on left page */
}
@page :right {
    margin: 3in;    /* margin on right page */
}
@page :first {
    margin-top: 5in;    /* top margin on first page */
}

根据链接https://www.tutorialrepublic.com/css-reference/css-page-rule.php

【讨论】：

对方是专门针对Safari浏览器询问的，Safari不支持页面规则。 developer.mozilla.org/en-US/docs/Web/CSS/@page