使用绝对定位的HTML元素在firefox上打印而不是打印

时间:2016-06-23 10:11:28

标签: php html css html5 printing

浏览器中显示的一切都很好,但是当我去打印时,第一页内容仅在第一页中过去,第二页打印后没有显示任何值。 这是我的问题的示例代码: 注意:我使用的是Firefox 47.0窗口

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

1 个答案:

答案 0 :(得分:0)

您可以使用css中使用的媒体查询打印,并在媒体查询中定义样式属性。 您可以访问此link