用于印刷媒体的 CSS3答案

【问题标题】：CSS3 for Print media用于印刷媒体的 CSS3
【发布时间】：2013-10-19 13:38:21
【问题描述】：

我正在尝试为 pdf 打印输出生成一个页面（静态 html，某些部分使用 php 生成）。

这是特定于页面打印版本的 CSS。还有其他格式规则，但它们不在“@media print”标签内：

@media print {
    @page {
        @top-right {
            content: "99999999 | L.L.O.";
        }
        orphans: 4;
        widows: 3;

    }

    @page:margin {
        margin: 2cm;
    }

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

    @page :left {
        margin-left: 3cm;
        margin-right: 2cm; 
    }

    @page :right {
        margin-left: 2cm;
        margin-right: 3cm;
    }

    div.divHeader {
        position: fixed;
        padding-bottom: 30px;
        top: 0;
        text-align: right;
        float: right;
    }

    .do_not_print {
        display: none;
    }
}

这些样式在每种浏览器上都给出了截然不同的结果：

OS X (WebKit) 上的 Safari：忽略所有 @page 规则，部分呈现 divHeader 但仅在第一页，并且不呈现文本对齐、填充或浮动命令，呈现“page-break-inside " 在 div 上
OS X (Gecko) 上的 Firefox：类似于 Safari，但在所有页面上呈现 divHeader
Opera on OS X (Presto)：渲染边距命令！，在随机页面（但不包括其填充组件）上渲染 divHeader，但只打印前 4 页（共 14 页！）
PC 上的 IE (Trident)：主要呈现页边距（除了页边距顶部），只打印前两页，但覆盖第一页之后的各个 div，打印头部并渲染定位部分

我真的希望你会发现我的代码有问题...

感谢您的关注！

【问题讨论】：

标签： html css pdf printing

【解决方案1】：

经过深入研究，更改了代码的多个方面，可以优化 Firefox 的输出。 Safari、Opera 和 IE 仍然很糟糕。 Safari/WebKit 有一些错误，导致无法呈现正在运行的头部。可以为 Opera 和 IE 调整这个 css。

@media print {

    @page {
        margin: 2cm;
        orphans: 5;
        widows: 5;
    }

    .title {

        margin: 10cm 0 0 0;
        page-break-after: always;
        display: block;

    }


    div.divHeader {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        margin: 10px;
    }

    img {

        max-width: 98% !important;
        page-break-inside: avoid;

    }

    .do_not_print {
        display: none;
    }
}

【讨论】：