Question

我一直在尝试使用CSS3的一些文档功能，在每个页面的顶部重复标题（至少在打印时），但这些都不起作用，无论是Safari还是Firefox。

有没有人知道为什么？

下面是一个简单的非工作测试：

<html>
<head>
  <style type="text/css"> 
    #header{
      position: running(pageHeader);
    }
    @page {
        size: A4 portrait;
        margin: 2in;

        @top-left {
            content: "THIS IS ANOTHER NON-WORKING ATTEMPT";
        }
    }
    @page {
      @top-center {
        content: element(pageHeader);
      }
    }
    div.content {
        page-break-after: always;
    } 
  </style>
</head> 
<body>
  <div id='header'>THIS IS A NON-WORKING ATTEMPT TO HAVE THIS HEAD EVERY PAGE</div>
  <div class='content'>Content for a Page1, which is properly followed by a page-break</div>
  <div>Content for a Page2</div>
</body>
</html>

Answer 1

如果您只是在打印时需要它，为什么不尝试使用常规CSS规则隐藏它并使用@media print CSS规则显示它？您可能可以执行此操作和创建一个不同的div，它会粘贴到页面顶部（在浏览器上）并在打印时隐藏这个新div。

CSS和重复的页眉不起作用

1 个答案: