Html 印刷媒体CSS3

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

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

这些样式在每种类型的浏览器上都会产生截然不同的结果：

• OSX上的Safari（WebKit）：忽略所有@page规则，部分呈现divHeader，但仅在第一页上呈现，不呈现文本对齐、填充或浮动命令，在Div上呈现“内部分页符”
• OS X上的Firefox（Gecko）：与Safari类似，但在所有页面上呈现divHeader
• OS X上的Opera（Presto）：渲染边距命令！，在随机页面（但不是其填充组件）上呈现divHeader，但仅打印前4页（共14页！）
• 个人电脑上的IE（Trident）：主要渲染页边（页边顶部除外），仅打印前两页，但在第一页之后覆盖单独的div，打印页眉并渲染页边的定位部分

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

---

感谢您的关注

在对代码的多个方面进行了深入研究之后，就可以优化Firefox的输出了。狩猎、歌剧和IE仍然很疯狂。Safari/WebKit有一些bug，使得无法渲染正在运行的头部。可以调整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;
    }
}

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