Question

我正在尝试为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上的Safari（WebKit）：忽略所有@page规则，部分呈现divHeader但仅在第一页上，并且不呈现text-align，padding或float命令，呈现“page-打破“在divs上
OS X上的Firefox（Gecko）：与Safari类似，但在所有页面上呈现divHeader
OS X上的Opera（Presto）：渲染边距命令！，在随机页面上呈现divHeader（但不是其填充组件），但只打印前4页（14页！）
PC上的IE（三叉戟）：主要渲染边距（margin-top除外），只打印前两页但覆盖第一页后面的各个div，打印头并渲染定位部分它也是

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

谢谢你的期待！

Answer 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;
    }
}

用于打印媒体的CSS3

1 个答案: