用於打印媒體的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

回答

相關問題