用于打印媒体的CSS3

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

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

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

这些样式给出浏览器的每个品种的疯狂不同的结果：

的Safari OS X（WebKit的）：忽略所有@page规则，部分呈现divHeader，但仅在第一页上显示，并且不呈现文本对齐，填充或浮动命令，呈现div中的“page-break-inside”
OS X上的Firefox壁虎）：类似野生动物园，但仁在
歌剧院OS X（普雷斯托）：渲染保证金命令！呈现divHeader随机页面（而不是其填充成分），但只打印第一页4
IE在PC（三叉戟）：晴呈现保证金（除边距），只打印了前两页，但覆盖到第一页以后的个人申报单，打印头和渲染它的定位部分太

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

感谢您的好评！

来源

2013-10-19 Levi

经过深入研究，改变了代码的多个方面之后，可以优化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; 
    } 
}

来源

2013-10-19 15:35:36 Levi

用于打印媒体的CSS3

回答

相关问题