使用絕對定位的HTML元素不打印在Firefox上打印

在瀏覽器中一切都很好顯示，但是當我去打印時，第一個內容僅在第一頁打印，第二頁打印後沒有值顯示。這裏是我的問題的一個示例代碼：注：我使用的窗口火狐47.0使用絕對定位的HTML元素不打印在Firefox上打印

<html> 
<body> 
<div id="1" style="position: absolute; top:0px;left:0px;">content</div> 
<div id="2" style="position: absolute; top:1000px;left:0px;">test</div> 
</body> 
</html>

下面是我的代碼的一部分。

for($i=0;$i<20;i++){ 
      $s_invoice_id=643 +(3128*$i)."px"; 
      $s_customerName=796+(3128*$i)."px"; 
      $s_sdCustomerPhone=888+(3128*$i)."px"; 
      $s_image=1170+(3128*$i)."px"; 
      $s_code=1230+(3128*$i)."px"; 
      $s_rdadress=1295+(3128*$i)."px"; 
      $s_color=1370+(3128*$i)."px"; 
      $s_size=1370+(3128*$i)."px"; 
      $s_qty=1294+(3128*$i)."px"; 
      $s_price=1294+(3128*$i)."px"; 
      $s_discount=1350+(3128*$i)."px"; 
      $s_qty_price=1294+(3128*$i)."px"; 
      $s_total_dis=1350+(3128*$i)."px"; 
      $s_synCode=1294+(3128*$i)."px"; 
      $s_c_dollar=2680+(3128*$i)."px"; 
      $s_c_reil=2753+(3128*$i)."px"; 
      $s_reference=2757+(3128*$i)."px"; 
      echo ' 
      <div> 
       <img style="z-index: -1;" src="invioce/copy.png"/> 
      </div> 
      <div style="position: absolute; z-index: 999;left: 1720px; top: '.$s_invoice_id.'; font-size:46px;"><p><b>invoice_id</b></p></div> 
      <div id="customerName" style="position: absolute; z-index: 999;left: 493px; top: '.$s_customerName.'; font-size:45px;"><p><b>customerName</b></p></div> 
      <div id="customerPhone" style="position: absolute; z-index: 999;left: 493px; top: '.$s_sdCustomerPhone.'; font-size:45px;"><p><b>sdCustomerPhone</b></p></div> 
      <div id="picture" style="position: absolute; z-index: 999;left: 274px; top: '.$s_image.'; font-size:37px;"><img style="width:190px; height:190px" src="image" /></div> 
      <div id="syncode" style="position: absolute; z-index: 999;left: 575px; top: '.$s_code.'; font-size:37px;"><p>code</p></div> 
      <div id="other_add" style="position: absolute; z-index: 999;left: 575px; top: '.$s_rdadress.'; font-size:25px; font-style: italic;"><p>$rdadress</p></div> 
      <div id="color" style="position: absolute; z-index: 999; left: 459px; top: '.$s_color.'; font-size:37px;"><p>Color</p></div> 
      <div id="size" style="position: absolute; z-index: 999; left: 890px; top: '.$s_size.'; font-size:37px;"><p>size</p></div> 
      <div id="qty" style="position: absolute; z-index: 999; left: 1262px; top: '.$s_qty.'; font-size:37px;"><p>$qty</p></div> 
      <div id="unitprice" style="position: absolute; z-index: 999; left: 1438px; top: '.$s_price.'; font-size:37px;"><p>price</p></div> 
      <div id="dis_unitprice" style="position: absolute; z-index: 999; left: 1438px; top: '.$s_discount.'; font-size:37px;"><p>discount</p></div> 
      <div id="total" style="position: absolute; z-index: 999; left: 1690px; top: '.$s_qty_price.'; font-size:37px;">qtyprice</p></div> 
      <div id="dis_total" style="position: absolute; z-index: 999; left: 1690px; top: '.$s_total_dis.'; font-size:37px;">total_dis</p></div> 
      <div id="other_syn" style="position: absolute; z-index: 999; left: 1950px; top: '.$s_synCode.'; font-size:37px;"><p>synCode</p></div> 

      <div id="c_dollar" style="position: absolute; z-index: 999; left: 1800px; top: '.$s_c_dollar.'; font-size:45px;"><p><b>$total</b></p></div> 
      <div id="c_reil" style="position: absolute; z-index: 999; left: 1800px; top: '.$s_c_reil.'; font-size:45px;"><p><b>number_format</b></p></div> 
      <div id="reference" style="position: absolute; z-index: 999; left: 455px; top: '.$s_reference.'; font-size:37px;"><p>reference</p></div>'; 
     }

來源

2016-06-23 Mengky Chen

您可以使用在CSS中使用的媒體查詢打印並在媒體查詢中定義樣式屬性。您可以訪問此link

來源

2016-06-23 10:34:11

但它stiil不顯示我的內容從第二頁。只顯示空白頁面。 –

我已經通過直接給出打印命令測試了你的代碼，並且我已經將top改成了1500px，並且內容在第二頁上了（我使用了命令Ctrl + P） –

現在我只是編輯我的問題。 –

使用絕對定位的HTML元素不打印在Firefox上打印

回答

相關問題