CSS和重複頁面標題不起作用

我一直在嘗試一些CSS3的文檔化功能，以在每個頁面的頂部重複標題（至少在打印時），但這不工作，無論是Safari還是Firefox。CSS和重複頁面標題不起作用

有人會有一個線索，爲什麼？

這裏是低於一個簡單的非工作測試：

<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>

來源

2014-04-25 lai

如果你只需要在打印的時候，你爲什麼不嘗試用一個常規的CSS規則隱藏它並顯示出一個@media print CSS它規則？你可以做到這一點和使一個不同的div粘在頁面的頂部（在瀏覽器上）並在打印時隱藏這個新的div。

來源

2014-04-25 15:44:19 morespace54

事實上，我希望它首先工作。然後我會看到用@media區分顯示。你是否偶然知道如何重複頁眉的工作？ – lai

我知道瀏覽器和運行元素有幾個問題。另外，你的頭文件的ID爲'header'，但你在CSS中調用'element（pageHeader）'看起來很奇怪。你可能會考慮到這一點（加上你在第二個div末尾有''這一事實 - 但這可能不是問題）。 – morespace54

我已經試過所有與頁眉有關的項目，但是這並沒有解決它（事實上，如果我理解的很好，element（）調用指的是之前在running（）調用中發生的事情， Element #header，所以理論上應該是這樣）。我讀過Safari並不支持@page（不再？）。所以我可能會放棄我的嘗試後，與另一個瀏覽器（也許歌劇）成功測試。 – lai

CSS和重複頁面標題不起作用

回答

相關問題