@page Css 样式不适用于 Mozilla firefox

Question

我的要求是在打印时为所有页面提供10cm的边距。

我正在使用window.print() 打印。我的网页会动态增加（因此无法确定页数）。对于所有页面，我需要提供 10 厘米的边距。

我使用了 CSS Media="Print"，我在其中定义了样式：

  @page
  {
     Margin-top :10cm; 
  }

这适用于所有浏览器除了Mozilla firefox。我搜索了解决方案，所有博客都说，Mozilla 不支持@page，但没有解决方案。有人可以帮我吗？ 请让我知道是否可以在 Mozilla 中实现

Answer 1

抱歉，我知道您的问题已经很老了，但它出现在我针对相同问题的谷歌查询中。

根据此链接 (https://developer.mozilla.org/en-US/docs/Web/CSS/@page)，Firefox 从 19.0 开始支持它，这是在您的帖子之后，只是为了完整性...

Answer 2

尝试使用 @document 和 moz 前缀，例如 Firefox

的 @-moz-document

@-moz-document 规则是 Gecko 特定的 at-rule，它根据文档的 URL 限制其中包含的样式规则。它主要是为用户样式表设计的。 @-moz-document 规则可以指定一个或多个匹配函数。如果任何函数适用于某个 URL，则该规则将对该 URL 生效。

示例：

@-moz-document url(http://www.w3.org/),  
           url-prefix(http://www.w3.org/Style/),  
           domain(mozilla.org),  
           regexp("https:.*")  
{  
  /* CSS rules here apply to: 
     + The page "http://www.w3.org/". 
     + Any page whose URL begins with "http://www.w3.org/Style/" 
     + Any page whose URL's host is "mozilla.org" or ends with ".mozilla.org" 
     + Any page whose URL starts with "https:" */  

  /* make the above-mentioned pages really ugly */  

     @media print{
         body { margin-top :10cm; }
     }       
}  

可用功能：

• url()，匹配一个精确的 URL
• url-prefix()，如果文档 URL 以提供的值开头，则匹配
• domain()，如果文档 URL 位于提供的域（或其子域）上，则匹配
• regexp()，如果文档 URL 与提供的正则表达式匹配，则匹配。表达式必须与整个 URL 匹配。