css3页面媒体无法在任何浏览器中运行

Question

css3页面媒体无法在任何浏览器中运行

Imr*_*han 5 html css printing-web-page css-paged-media css-gcpm

您好我已经使用CSS3页面媒体模块http://www.w3.org/TR/css-gcpm-3/直接从浏览器打印HTML内容到PDF,但我没有得到任何浏览器来处理它.我的工作如下.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
@media print {

body {
        margin: 0;
        padding: 0;
        background-color: #FAFAFA;
        font: 12pt "sans-serif";
        position: relative;
    }
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }


        @page {
            size: letter;
            margin: 20mm 25mm;
        }
        @page {
            @top-center {
                content: element(pageHeader);
            }
        }

        @page  {
            @bottom-center {
                content: element(pageFooter);
            }
        }
        #pageHeader {
          position: running(pageHeader);
        }
        #pageFooter{
          position: running(pageFooter);
        }

    }
</style>
</head>
<body>
<div id="pageHeader">
    <p>This is the Header shown on first page.</p>
</div>
<div id="pageFooter">
    <p>This is the footer shown on last page.</p>
</div>
<section class="page"> 

<h1>Introduction</h1>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>

<p>
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:

</p>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>


 </section>


 </body>
</html>

Run Code Online (Sandbox Code Playgroud)

它对我来说在任何浏览器中都不起作用.我已经在最新的Chrome,FF,Opera,Safari中进行了测试.它应该在每个页面上显示页眉和页脚.标题旨在显示在每个页面底部的每个页面和页脚的顶部.任何人都可以拥有实际工作的CSS3页面媒体模块元素的工作示例.此外,我不是寻找页眉和页脚的绝对或固定解决方案.我已经尝试了它,除了单页之外它不起作用.我缩短了这个问题的文本内容,但它可以复制和过去生成多页文档,以查看没有页眉和页脚的多个页面.页眉和页脚div保持在顶部.

Answer 1

小智 1

难道是因为该规范来自 W3C 工作草案而不是实际实现，所以目前还没有浏览器实现该提议的规范？事实上，它甚至还没有被提出——它正在作为“工作草案”进行讨论，这意味着它可以开放讨论，甚至还没有进入“编辑草案”。从那时起，您可能还需要一段时间才能在浏览器中看到它可用。该工作草案的日期也相对较新 - 2014 年 5 月 13 日 - 因此暂时不要实施该提案中的任何一项。也就是说，这看起来确实是一个方便的补充。

现在，如何在该标头位置使用 CSS 伪元素“before”或“after”以及标签？

这里很好地描述了工作草案和编辑草稿之间的差异： What is the Difference Between a W3Cworking Draft and an Editor's Draft?

归档时间：	11 年，6 月前
查看次数：	1271 次
最近记录：	6 年，4 月前