Safari打印与Chrome + Firefox不同（html / css）

Question

我正在尝试通过浏览器为avery 5160/8160打印条形码表。我发现并修改了代码 https://boulderinformationservices.wordpress.com/2011/08/25/print-avery-labels-using-css-and-html/

它完全符合我在Firefox + Chrome中的需求;但是在Safari中，它会在垂直和水平方向上打印中心。

是检测用户代理并且只为Safari设置代码的唯一选项吗？ Safari有不同的测量英寸的方法吗？

以下是chrome的输出：

这是safari的输出：

以下是使用的代码：

 <style>

 @media print
 {
    html
    {
        margin: 0;
        padding: 0;
    }

    body {
         width: 8.5in !important;
         margin: .5in .1875in 0 .1875in !important;
        }

        .hidden-print
        {
            display: none;
        }

       @page {
         margin: 0;
         padding: 0;
       } 
    }


 .barcode-label{
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
     width: 2.325in;
     height: 1.02in;
     padding: .015in .15in 0 .15in;
     margin-right: .195in;
      font-size: 10pt;
     float: left;
      line-height: 1em;
      letter-spacing: normal;

     text-align: center;
     overflow: hidden;

     outline: 1px dotted;
     }

     .page-break  {
     clear: left;
     display:block;
     page-break-after:always;
     }
 </style>

 <h1 class="hidden-print" style="text-align: center;">Avery 8160 <?php echo lang('common_template');?></h1>
<div class="hidden-print" style="text-align: center;margin-bottom: 10px;">
    <button class="btn btn-primary text-white hidden-print" id="print_button" onclick="window.print();"><?php echo lang('sales_print'); ?></button> 
</div>


 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

Answer 1

媒体打印未关闭

}