將在媒體頁面打印區域內的絕對位置

Question

我需要打印頁面的固定尺寸的div，以及內的絕對位置的div：

.page 
{ 
    width: 21cm; 
    min-height: 29.7cm; 
    padding: 1.2cm; 
    margin: 1cm auto; 
    border: 1px #D3D3D3 solid; 
    border-radius: 5px; 
    background: white; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
    position: relative; 
} 

媒體類打印：

@page 
{ 
    size: A4; 
    margin: 0; 
} 

@media print { 
    .page { 
    margin: 0; 
    border: initial; 
    border-radius: initial; 
    width: initial; 
    min-height: initial; 
    box-shadow: initial; 
    background: initial; 
    page-break-after: always; 
    position: relative; 
    } 
} 

股利：

<div id="proc_comp">Printed by Computer</div> 

#proc_comp 
{ 
    position: absolute; 
    left: 190px; 
    bottom: 15px; 
    font-size: 0.65em; 
} 

但股利，當我嘗試在瀏覽器中打印，它不會出現在同一個地方的HT ML佈局，爲什麼？

謝謝。

Answer 1

出現錯誤的定位是因爲您在#proc_comp規則中使用基於像素的位置，而頁面使用的是A4格式（基於非像素的佈局）。您可以嘗試使用下面的替代

#proc_comp { 
    position: absolute; 
    left: 50%; 
    top: 50px; 
    margin-left: -5em; 
    margin-top: -1em; 
} 

您可能不得不玩的切緣陰性，以滿足您的顯示信息的高度和寬度，使之出現在中心。